diff --git a/build.gradle.kts b/build.gradle.kts
index 5432b721b..a8415e519 100644
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -44,7 +44,8 @@ val published = listOf(
     "kandy-echarts",
     "kandy-lets-plot",
     "kandy-geo",
-    "kandy-util"
+    "kandy-util",
+    "kandy-samples-utils"
 )
 
 configure(subprojects.filter { it.name in published }) {
diff --git a/docs/cfg/buildprofiles.xml b/docs/cfg/buildprofiles.xml
index be4c72f16..76ca1de19 100644
--- a/docs/cfg/buildprofiles.xml
+++ b/docs/cfg/buildprofiles.xml
@@ -7,7 +7,7 @@
         <!--For users contribute-->
         <enable-browser-edits>true</enable-browser-edits>
         <browser-edits-url>https://github.com/Kotlin/kandy/edit/main/docs/</browser-edits-url>
-
+        <include-in-head>include-head.html</include-in-head>
         <web-root>https://kotlin.github.io/kandy/</web-root>
         <feedback-widget>false</feedback-widget>
         <webmaster>webmaster@jetbrains.com</webmaster>
diff --git a/docs/cfg/include-head.html b/docs/cfg/include-head.html
new file mode 100644
index 000000000..c5c5b3039
--- /dev/null
+++ b/docs/cfg/include-head.html
@@ -0,0 +1 @@
+<script src="static/custom.js"></script>
diff --git a/docs/cfg/static/custom.js b/docs/cfg/static/custom.js
new file mode 100644
index 000000000..5de1a722f
--- /dev/null
+++ b/docs/cfg/static/custom.js
@@ -0,0 +1,67 @@
+window.addEventListener('load', () => {
+    function updateIframeThemes(theme) {
+        const iframes = document.querySelectorAll('iframe');
+
+        iframes.forEach((iframe) => {
+            if (iframe.contentWindow && iframe.contentWindow.document) {
+                iframe.contentWindow.document.documentElement.setAttribute('theme', theme);
+            }
+        });
+    }
+
+    function observeHtmlClassChanges() {
+        const htmlElement = document.documentElement;
+
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                    const theme = htmlElement.classList.contains('theme-light') ? 'light' : 'dark';
+                    updateIframeThemes(theme);
+                }
+            });
+        });
+
+        observer.observe(htmlElement, { attributes: true });
+    }
+
+    window.addEventListener('message', (event) => {
+        if (event.data.type === 'iframeHeight') {
+            document.querySelectorAll('iframe').forEach((iframe) => {
+                if (iframe.contentWindow === event.source) {
+                    iframe.style.height = event.data.height + 'px';
+                }
+            });
+        }
+    });
+
+    function observeIframe(iframe) {
+        const theme = document.documentElement.classList.contains('theme-light') ? 'light' : 'dark';
+
+        function sendTheme() {
+            iframe.contentDocument.documentElement.setAttribute('theme', theme);
+        }
+
+        iframe.addEventListener('load', sendTheme);
+        if (iframe.contentDocument.readyState === 'complete') sendTheme();
+    }
+
+    document.querySelectorAll('iframe').forEach(observeIframe);
+
+    const bodyObserver = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            mutation.addedNodes.forEach((node) => {
+                if (node.tagName === 'IFRAME') observeIframe(node);
+                else if (node.querySelectorAll) {
+                    node.querySelectorAll('iframe').forEach(observeIframe);
+                }
+            });
+        });
+    });
+
+    bodyObserver.observe(document.body, { childList: true, subtree: true });
+
+    observeHtmlClassChanges();
+
+    const initialTheme = document.documentElement.classList.contains('theme-light') ? 'light' : 'dark';
+    updateIframeThemes(initialTheme);
+});
diff --git a/docs/images/guides/geoGuide/electionResultsPlotByParty.svg b/docs/images/guides/geoGuide/electionResultsPlotByParty.svg
index c1459f5ed..86f7fecea 100644
--- a/docs/images/guides/geoGuide/electionResultsPlotByParty.svg
+++ b/docs/images/guides/geoGuide/electionResultsPlotByParty.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 6.670670252501083 L0.0 496.32932974749895 L705.0 496.32932974749895 L705.0 6.670670252501083 Z">
     </path>
     <g transform="translate(6.0 61.67067025250108 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (693.0, 428.65865949499783)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (693.0, 428.65865949499783)]">
         <g transform="">
           <g>
             <g>
@@ -355,7 +355,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="693.0" height="428.65865949499783">
             </rect>
           </clipPath>
@@ -415,6 +415,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 6.670670252501083 L0.0 496.32932974749895 L705.0 496.32932974749895 L705.0 6.670670252501083 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/electionResultsPlotByParty_dark.svg b/docs/images/guides/geoGuide/electionResultsPlotByParty_dark.svg
index 9aea8f426..aa2ba42cd 100644
--- a/docs/images/guides/geoGuide/electionResultsPlotByParty_dark.svg
+++ b/docs/images/guides/geoGuide/electionResultsPlotByParty_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 6.670670252501083 L0.0 496.32932974749895 L705.0 496.32932974749895 L705.0 6.670670252501083 Z">
     </path>
     <g transform="translate(6.0 61.67067025250108 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (693.0, 428.65865949499783)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (693.0, 428.65865949499783)]">
         <g transform="">
           <g>
             <g>
@@ -355,7 +355,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="693.0" height="428.65865949499783">
             </rect>
           </clipPath>
@@ -415,6 +415,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 6.670670252501083 L0.0 496.32932974749895 L705.0 496.32932974749895 L705.0 6.670670252501083 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesAdjusted.svg b/docs/images/guides/geoGuide/usaStatesAdjusted.svg
index e2aaec230..395ef5d12 100644
--- a/docs/images/guides/geoGuide/usaStatesAdjusted.svg
+++ b/docs/images/guides/geoGuide/usaStatesAdjusted.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 7.864832218167692 L0.0 462.1351677818323 L705.0 462.1351677818323 L705.0 7.864832218167692 Z">
     </path>
     <g transform="translate(21.0 13.864832218167692 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.2703355636646)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.2703355636646)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -387,7 +387,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="408.2703355636646">
             </rect>
           </clipPath>
@@ -527,6 +527,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 7.864832218167692 L0.0 462.1351677818323 L705.0 462.1351677818323 L705.0 7.864832218167692 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesAdjusted_dark.svg b/docs/images/guides/geoGuide/usaStatesAdjusted_dark.svg
index 3f0c3fedb..2e2952037 100644
--- a/docs/images/guides/geoGuide/usaStatesAdjusted_dark.svg
+++ b/docs/images/guides/geoGuide/usaStatesAdjusted_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 7.864832218167692 L0.0 462.1351677818323 L705.0 462.1351677818323 L705.0 7.864832218167692 Z">
     </path>
     <g transform="translate(21.0 13.864832218167692 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.2703355636646)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.2703355636646)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -505,7 +505,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="408.2703355636646">
             </rect>
           </clipPath>
@@ -527,6 +527,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 7.864832218167692 L0.0 462.1351677818323 L705.0 462.1351677818323 L705.0 7.864832218167692 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesFilterContiguous.svg b/docs/images/guides/geoGuide/usaStatesFilterContiguous.svg
index 7a2b670ae..7ea603650 100644
--- a/docs/images/guides/geoGuide/usaStatesFilterContiguous.svg
+++ b/docs/images/guides/geoGuide/usaStatesFilterContiguous.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 34.210051452591955 L0.0 435.789948547408 L705.0 435.789948547408 L705.0 34.210051452591955 Z">
     </path>
     <g transform="translate(21.0 40.210051452591955 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 355.5798970948161)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 355.5798970948161)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -371,7 +371,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="355.5798970948161">
             </rect>
           </clipPath>
@@ -495,6 +495,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 34.210051452591955 L0.0 435.789948547408 L705.0 435.789948547408 L705.0 34.210051452591955 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesFilterContiguous_dark.svg b/docs/images/guides/geoGuide/usaStatesFilterContiguous_dark.svg
index 2d3ccdd57..393f09b46 100644
--- a/docs/images/guides/geoGuide/usaStatesFilterContiguous_dark.svg
+++ b/docs/images/guides/geoGuide/usaStatesFilterContiguous_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 34.210051452591955 L0.0 435.789948547408 L705.0 435.789948547408 L705.0 34.210051452591955 Z">
     </path>
     <g transform="translate(21.0 40.210051452591955 ) ">
@@ -269,7 +269,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 355.5798970948161)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 355.5798970948161)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -473,7 +473,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="355.5798970948161">
             </rect>
           </clipPath>
@@ -495,6 +495,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 34.210051452591955 L0.0 435.789948547408 L705.0 435.789948547408 L705.0 34.210051452591955 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesGeoPolygonPlotCustomized.svg b/docs/images/guides/geoGuide/usaStatesGeoPolygonPlotCustomized.svg
index 8882c1c24..0983b358e 100644
--- a/docs/images/guides/geoGuide/usaStatesGeoPolygonPlotCustomized.svg
+++ b/docs/images/guides/geoGuide/usaStatesGeoPolygonPlotCustomized.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -395,7 +395,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -563,6 +563,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesGeoPolygonPlotCustomized_dark.svg b/docs/images/guides/geoGuide/usaStatesGeoPolygonPlotCustomized_dark.svg
index b7f412bf5..39f8019cb 100644
--- a/docs/images/guides/geoGuide/usaStatesGeoPolygonPlotCustomized_dark.svg
+++ b/docs/images/guides/geoGuide/usaStatesGeoPolygonPlotCustomized_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -541,7 +541,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -563,6 +563,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesPlotGeoMap.svg b/docs/images/guides/geoGuide/usaStatesPlotGeoMap.svg
index 07fa30579..a0475e14f 100644
--- a/docs/images/guides/geoGuide/usaStatesPlotGeoMap.svg
+++ b/docs/images/guides/geoGuide/usaStatesPlotGeoMap.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M66.93508055783218 0.0 L66.93508055783218 470.0 L638.0649194421678 470.0 L638.0649194421678 0.0 Z">
     </path>
     <g transform="translate(87.93508055783218 6.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (526.1686279733992, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (526.1686279733992, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -395,7 +395,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="526.1686279733992" height="424.0">
             </rect>
           </clipPath>
@@ -563,6 +563,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M66.93508055783218 0.0 L66.93508055783218 470.0 L638.0649194421678 470.0 L638.0649194421678 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesPlotGeoMap_dark.svg b/docs/images/guides/geoGuide/usaStatesPlotGeoMap_dark.svg
index 3e8187d38..2cfdbfca1 100644
--- a/docs/images/guides/geoGuide/usaStatesPlotGeoMap_dark.svg
+++ b/docs/images/guides/geoGuide/usaStatesPlotGeoMap_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M66.93508055783218 0.0 L66.93508055783218 470.0 L638.0649194421678 470.0 L638.0649194421678 0.0 Z">
     </path>
     <g transform="translate(87.93508055783218 6.0 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (526.1686279733992, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (526.1686279733992, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -541,7 +541,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="526.1686279733992" height="424.0">
             </rect>
           </clipPath>
@@ -563,6 +563,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M66.93508055783218 0.0 L66.93508055783218 470.0 L638.0649194421678 470.0 L638.0649194421678 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesPlotGeoPolygon.svg b/docs/images/guides/geoGuide/usaStatesPlotGeoPolygon.svg
index 448433e29..c9b8e9272 100644
--- a/docs/images/guides/geoGuide/usaStatesPlotGeoPolygon.svg
+++ b/docs/images/guides/geoGuide/usaStatesPlotGeoPolygon.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -395,7 +395,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -563,6 +563,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesPlotGeoPolygon_dark.svg b/docs/images/guides/geoGuide/usaStatesPlotGeoPolygon_dark.svg
index c2a5aa7db..3c5da09ef 100644
--- a/docs/images/guides/geoGuide/usaStatesPlotGeoPolygon_dark.svg
+++ b/docs/images/guides/geoGuide/usaStatesPlotGeoPolygon_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -541,7 +541,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -563,6 +563,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesPlotMergedPolygon.svg b/docs/images/guides/geoGuide/usaStatesPlotMergedPolygon.svg
index ffd572b9d..98c5f379a 100644
--- a/docs/images/guides/geoGuide/usaStatesPlotMergedPolygon.svg
+++ b/docs/images/guides/geoGuide/usaStatesPlotMergedPolygon.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M66.93508055783218 0.0 L66.93508055783218 470.0 L638.0649194421678 470.0 L638.0649194421678 0.0 Z">
     </path>
     <g transform="translate(87.93508055783218 6.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (526.1686279733992, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (526.1686279733992, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -191,7 +191,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="526.1686279733992" height="424.0">
             </rect>
           </clipPath>
@@ -359,6 +359,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M66.93508055783218 0.0 L66.93508055783218 470.0 L638.0649194421678 470.0 L638.0649194421678 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesPlotMergedPolygon_dark.svg b/docs/images/guides/geoGuide/usaStatesPlotMergedPolygon_dark.svg
index c005d0ebe..16bb9d3c9 100644
--- a/docs/images/guides/geoGuide/usaStatesPlotMergedPolygon_dark.svg
+++ b/docs/images/guides/geoGuide/usaStatesPlotMergedPolygon_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M66.93508055783218 0.0 L66.93508055783218 470.0 L638.0649194421678 470.0 L638.0649194421678 0.0 Z">
     </path>
     <g transform="translate(87.93508055783218 6.0 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (526.1686279733992, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (526.1686279733992, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -337,7 +337,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="526.1686279733992" height="424.0">
             </rect>
           </clipPath>
@@ -359,6 +359,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M66.93508055783218 0.0 L66.93508055783218 470.0 L638.0649194421678 470.0 L638.0649194421678 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesPlotWithAlbersCrs.svg b/docs/images/guides/geoGuide/usaStatesPlotWithAlbersCrs.svg
index 26a265952..355228319 100644
--- a/docs/images/guides/geoGuide/usaStatesPlotWithAlbersCrs.svg
+++ b/docs/images/guides/geoGuide/usaStatesPlotWithAlbersCrs.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (54.95712304215423, 0.0), (623.0428769578458, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (54.95712304215423, 0.0), (623.0428769578458, 424.0)]">
         <g transform="translate(54.95712304215423 0.0 ) ">
           <g>
             <g>
@@ -379,7 +379,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="54.95712304215423" y="0.0" width="623.0428769578458" height="424.0">
             </rect>
           </clipPath>
@@ -539,6 +539,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesPlotWithAlbersCrs_dark.svg b/docs/images/guides/geoGuide/usaStatesPlotWithAlbersCrs_dark.svg
index d8aca878b..008cbfbb8 100644
--- a/docs/images/guides/geoGuide/usaStatesPlotWithAlbersCrs_dark.svg
+++ b/docs/images/guides/geoGuide/usaStatesPlotWithAlbersCrs_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -313,7 +313,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (54.95712304215423, 0.0), (623.0428769578458, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (54.95712304215423, 0.0), (623.0428769578458, 424.0)]">
         <g transform="translate(54.95712304215423 0.0 ) ">
           <g>
             <g>
@@ -517,7 +517,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="54.95712304215423" y="0.0" width="623.0428769578458" height="424.0">
             </rect>
           </clipPath>
@@ -539,6 +539,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesPlotWithAxisLimits.svg b/docs/images/guides/geoGuide/usaStatesPlotWithAxisLimits.svg
index 16356213c..a2f3ad04d 100644
--- a/docs/images/guides/geoGuide/usaStatesPlotWithAxisLimits.svg
+++ b/docs/images/guides/geoGuide/usaStatesPlotWithAxisLimits.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 29.61608340347047 L0.0 440.3839165965295 L705.0 440.3839165965295 L705.0 29.61608340347047 Z">
     </path>
     <g transform="translate(21.0 35.61608340347047 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 364.76783319305906)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 364.76783319305906)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -383,7 +383,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="364.76783319305906">
             </rect>
           </clipPath>
@@ -507,6 +507,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 29.61608340347047 L0.0 440.3839165965295 L705.0 440.3839165965295 L705.0 29.61608340347047 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesPlotWithAxisLimits_dark.svg b/docs/images/guides/geoGuide/usaStatesPlotWithAxisLimits_dark.svg
index c9dfe940b..bdd669a95 100644
--- a/docs/images/guides/geoGuide/usaStatesPlotWithAxisLimits_dark.svg
+++ b/docs/images/guides/geoGuide/usaStatesPlotWithAxisLimits_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 29.61608340347047 L0.0 440.3839165965295 L705.0 440.3839165965295 L705.0 29.61608340347047 Z">
     </path>
     <g transform="translate(21.0 35.61608340347047 ) ">
@@ -269,7 +269,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 364.76783319305906)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 364.76783319305906)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -485,7 +485,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="364.76783319305906">
             </rect>
           </clipPath>
@@ -507,6 +507,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 29.61608340347047 L0.0 440.3839165965295 L705.0 440.3839165965295 L705.0 29.61608340347047 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesPlotWithBounds.svg b/docs/images/guides/geoGuide/usaStatesPlotWithBounds.svg
index e514a972b..96046e33f 100644
--- a/docs/images/guides/geoGuide/usaStatesPlotWithBounds.svg
+++ b/docs/images/guides/geoGuide/usaStatesPlotWithBounds.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 25.33613536329915 L0.0 444.66386463670085 L705.0 444.66386463670085 L705.0 25.33613536329915 Z">
     </path>
     <g transform="translate(21.0 31.33613536329915 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 373.3277292734017)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 373.3277292734017)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -375,13 +375,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="373.3277292734017">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="373.3277292734017">
             </rect>
           </clipPath>
@@ -505,6 +505,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 25.33613536329915 L0.0 444.66386463670085 L705.0 444.66386463670085 L705.0 25.33613536329915 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesPlotWithBounds_dark.svg b/docs/images/guides/geoGuide/usaStatesPlotWithBounds_dark.svg
index 194dce0c8..652990515 100644
--- a/docs/images/guides/geoGuide/usaStatesPlotWithBounds_dark.svg
+++ b/docs/images/guides/geoGuide/usaStatesPlotWithBounds_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 25.33613536329915 L0.0 444.66386463670085 L705.0 444.66386463670085 L705.0 25.33613536329915 Z">
     </path>
     <g transform="translate(21.0 31.33613536329915 ) ">
@@ -269,7 +269,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 373.3277292734017)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 373.3277292734017)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -477,13 +477,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="373.3277292734017">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="373.3277292734017">
             </rect>
           </clipPath>
@@ -505,6 +505,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 25.33613536329915 L0.0 444.66386463670085 L705.0 444.66386463670085 L705.0 25.33613536329915 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesPlotWithCentroids.svg b/docs/images/guides/geoGuide/usaStatesPlotWithCentroids.svg
index 21b3ac7ed..f3b3ad516 100644
--- a/docs/images/guides/geoGuide/usaStatesPlotWithCentroids.svg
+++ b/docs/images/guides/geoGuide/usaStatesPlotWithCentroids.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 34.210051452591955 L0.0 435.789948547408 L705.0 435.789948547408 L705.0 34.210051452591955 Z">
     </path>
     <g transform="translate(21.0 40.210051452591955 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 355.5798970948161)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 355.5798970948161)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -426,13 +426,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="355.5798970948161">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="355.5798970948161">
             </rect>
           </clipPath>
@@ -556,6 +556,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 34.210051452591955 L0.0 435.789948547408 L705.0 435.789948547408 L705.0 34.210051452591955 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesPlotWithCentroids_dark.svg b/docs/images/guides/geoGuide/usaStatesPlotWithCentroids_dark.svg
index d676949dd..05f1c779a 100644
--- a/docs/images/guides/geoGuide/usaStatesPlotWithCentroids_dark.svg
+++ b/docs/images/guides/geoGuide/usaStatesPlotWithCentroids_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 34.210051452591955 L0.0 435.789948547408 L705.0 435.789948547408 L705.0 34.210051452591955 Z">
     </path>
     <g transform="translate(21.0 40.210051452591955 ) ">
@@ -269,7 +269,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 355.5798970948161)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 355.5798970948161)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -528,13 +528,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="355.5798970948161">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="355.5798970948161">
             </rect>
           </clipPath>
@@ -556,6 +556,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 34.210051452591955 L0.0 435.789948547408 L705.0 435.789948547408 L705.0 34.210051452591955 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesPlotWithDefaultBounds.svg b/docs/images/guides/geoGuide/usaStatesPlotWithDefaultBounds.svg
index b5a4f1e8e..277d0c28a 100644
--- a/docs/images/guides/geoGuide/usaStatesPlotWithDefaultBounds.svg
+++ b/docs/images/guides/geoGuide/usaStatesPlotWithDefaultBounds.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 34.210051452591955 L0.0 435.789948547408 L705.0 435.789948547408 L705.0 34.210051452591955 Z">
     </path>
     <g transform="translate(21.0 40.210051452591955 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 355.5798970948161)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 355.5798970948161)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -471,13 +471,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="355.5798970948161">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="355.5798970948161">
             </rect>
           </clipPath>
@@ -601,6 +601,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 34.210051452591955 L0.0 435.789948547408 L705.0 435.789948547408 L705.0 34.210051452591955 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesPlotWithDefaultBounds_dark.svg b/docs/images/guides/geoGuide/usaStatesPlotWithDefaultBounds_dark.svg
index a02a6e6af..510fe8f39 100644
--- a/docs/images/guides/geoGuide/usaStatesPlotWithDefaultBounds_dark.svg
+++ b/docs/images/guides/geoGuide/usaStatesPlotWithDefaultBounds_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 34.210051452591955 L0.0 435.789948547408 L705.0 435.789948547408 L705.0 34.210051452591955 Z">
     </path>
     <g transform="translate(21.0 40.210051452591955 ) ">
@@ -269,7 +269,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 355.5798970948161)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 355.5798970948161)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -573,13 +573,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="355.5798970948161">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="355.5798970948161">
             </rect>
           </clipPath>
@@ -601,6 +601,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 34.210051452591955 L0.0 435.789948547408 L705.0 435.789948547408 L705.0 34.210051452591955 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesPlotWithGreatCircle.svg b/docs/images/guides/geoGuide/usaStatesPlotWithGreatCircle.svg
index e4175b457..fbc9cd61b 100644
--- a/docs/images/guides/geoGuide/usaStatesPlotWithGreatCircle.svg
+++ b/docs/images/guides/geoGuide/usaStatesPlotWithGreatCircle.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 34.210051452591955 L0.0 435.789948547408 L705.0 435.789948547408 L705.0 34.210051452591955 Z">
     </path>
     <g transform="translate(21.0 40.210051452591955 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 355.5798970948161)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 355.5798970948161)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -385,19 +385,19 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="355.5798970948161">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="355.5798970948161">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="355.5798970948161">
             </rect>
           </clipPath>
@@ -521,6 +521,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 34.210051452591955 L0.0 435.789948547408 L705.0 435.789948547408 L705.0 34.210051452591955 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesPlotWithGreatCircle_dark.svg b/docs/images/guides/geoGuide/usaStatesPlotWithGreatCircle_dark.svg
index 1177b9dac..699e19fb2 100644
--- a/docs/images/guides/geoGuide/usaStatesPlotWithGreatCircle_dark.svg
+++ b/docs/images/guides/geoGuide/usaStatesPlotWithGreatCircle_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 34.210051452591955 L0.0 435.789948547408 L705.0 435.789948547408 L705.0 34.210051452591955 Z">
     </path>
     <g transform="translate(21.0 40.210051452591955 ) ">
@@ -269,7 +269,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 355.5798970948161)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 355.5798970948161)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -487,19 +487,19 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="355.5798970948161">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="355.5798970948161">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="355.5798970948161">
             </rect>
           </clipPath>
@@ -521,6 +521,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 34.210051452591955 L0.0 435.789948547408 L705.0 435.789948547408 L705.0 34.210051452591955 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesPlotWithMercator.svg b/docs/images/guides/geoGuide/usaStatesPlotWithMercator.svg
index 07fa30579..a0475e14f 100644
--- a/docs/images/guides/geoGuide/usaStatesPlotWithMercator.svg
+++ b/docs/images/guides/geoGuide/usaStatesPlotWithMercator.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M66.93508055783218 0.0 L66.93508055783218 470.0 L638.0649194421678 470.0 L638.0649194421678 0.0 Z">
     </path>
     <g transform="translate(87.93508055783218 6.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (526.1686279733992, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (526.1686279733992, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -395,7 +395,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="526.1686279733992" height="424.0">
             </rect>
           </clipPath>
@@ -563,6 +563,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M66.93508055783218 0.0 L66.93508055783218 470.0 L638.0649194421678 470.0 L638.0649194421678 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesPlotWithMercator_dark.svg b/docs/images/guides/geoGuide/usaStatesPlotWithMercator_dark.svg
index 3e8187d38..2cfdbfca1 100644
--- a/docs/images/guides/geoGuide/usaStatesPlotWithMercator_dark.svg
+++ b/docs/images/guides/geoGuide/usaStatesPlotWithMercator_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M66.93508055783218 0.0 L66.93508055783218 470.0 L638.0649194421678 470.0 L638.0649194421678 0.0 Z">
     </path>
     <g transform="translate(87.93508055783218 6.0 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (526.1686279733992, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (526.1686279733992, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -541,7 +541,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="526.1686279733992" height="424.0">
             </rect>
           </clipPath>
@@ -563,6 +563,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M66.93508055783218 0.0 L66.93508055783218 470.0 L638.0649194421678 470.0 L638.0649194421678 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesPlotWithTopCities.svg b/docs/images/guides/geoGuide/usaStatesPlotWithTopCities.svg
index 4ede4b58c..914f89f15 100644
--- a/docs/images/guides/geoGuide/usaStatesPlotWithTopCities.svg
+++ b/docs/images/guides/geoGuide/usaStatesPlotWithTopCities.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M66.93508055783218 0.0 L66.93508055783218 470.0 L638.0649194421678 470.0 L638.0649194421678 0.0 Z">
     </path>
     <g transform="translate(87.93508055783218 6.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (526.1686279733992, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (526.1686279733992, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -431,13 +431,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="526.1686279733992" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="526.1686279733992" height="424.0">
             </rect>
           </clipPath>
@@ -605,6 +605,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M66.93508055783218 0.0 L66.93508055783218 470.0 L638.0649194421678 470.0 L638.0649194421678 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesPlotWithTopCities_dark.svg b/docs/images/guides/geoGuide/usaStatesPlotWithTopCities_dark.svg
index c311d5c1e..671d57253 100644
--- a/docs/images/guides/geoGuide/usaStatesPlotWithTopCities_dark.svg
+++ b/docs/images/guides/geoGuide/usaStatesPlotWithTopCities_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M66.93508055783218 0.0 L66.93508055783218 470.0 L638.0649194421678 470.0 L638.0649194421678 0.0 Z">
     </path>
     <g transform="translate(87.93508055783218 6.0 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (526.1686279733992, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (526.1686279733992, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -577,13 +577,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="526.1686279733992" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="526.1686279733992" height="424.0">
             </rect>
           </clipPath>
@@ -605,6 +605,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M66.93508055783218 0.0 L66.93508055783218 470.0 L638.0649194421678 470.0 L638.0649194421678 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesPlotWithWorldCities.svg b/docs/images/guides/geoGuide/usaStatesPlotWithWorldCities.svg
index b4c300bb7..81add40ad 100644
--- a/docs/images/guides/geoGuide/usaStatesPlotWithWorldCities.svg
+++ b/docs/images/guides/geoGuide/usaStatesPlotWithWorldCities.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M114.02909181670745 0.0 L114.02909181670745 470.0 L590.9709081832925 470.0 L590.9709081832925 0.0 Z">
     </path>
     <g transform="translate(135.02909181670745 6.0 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (424.0000000001805, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (424.0000000001805, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -7739,13 +7739,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="424.0000000001805" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="25.941816366404606" y="0.0" width="424.0000000001805" height="424.0">
             </rect>
           </clipPath>
@@ -7899,6 +7899,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M114.02909181670745 0.0 L114.02909181670745 470.0 L590.9709081832925 470.0 L590.9709081832925 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/usaStatesPlotWithWorldCities_dark.svg b/docs/images/guides/geoGuide/usaStatesPlotWithWorldCities_dark.svg
index 2eb5acb68..34eefc869 100644
--- a/docs/images/guides/geoGuide/usaStatesPlotWithWorldCities_dark.svg
+++ b/docs/images/guides/geoGuide/usaStatesPlotWithWorldCities_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M114.02909181670745 0.0 L114.02909181670745 470.0 L590.9709081832925 470.0 L590.9709081832925 0.0 Z">
     </path>
     <g transform="translate(135.02909181670745 6.0 ) ">
@@ -307,7 +307,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (424.0000000001805, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (424.0000000001805, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -7871,13 +7871,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="424.0000000001805" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="25.941816366404606" y="0.0" width="424.0000000001805" height="424.0">
             </rect>
           </clipPath>
@@ -7899,6 +7899,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M114.02909181670745 0.0 L114.02909181670745 470.0 L590.9709081832925 470.0 L590.9709081832925 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/writeGeoJson2usaCitiesPlotFromGeoJson.svg b/docs/images/guides/geoGuide/writeGeoJson2usaCitiesPlotFromGeoJson.svg
index ea1ad7bb1..fbbe2febc 100644
--- a/docs/images/guides/geoGuide/writeGeoJson2usaCitiesPlotFromGeoJson.svg
+++ b/docs/images/guides/geoGuide/writeGeoJson2usaCitiesPlotFromGeoJson.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -229,7 +229,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -435,6 +435,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/writeGeoJson2usaCitiesPlotFromGeoJson_dark.svg b/docs/images/guides/geoGuide/writeGeoJson2usaCitiesPlotFromGeoJson_dark.svg
index 7b0dd07fb..aeba4c0f5 100644
--- a/docs/images/guides/geoGuide/writeGeoJson2usaCitiesPlotFromGeoJson_dark.svg
+++ b/docs/images/guides/geoGuide/writeGeoJson2usaCitiesPlotFromGeoJson_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -371,7 +371,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -413,7 +413,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -435,6 +435,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/writeShapefile2usaStatesPlotFromShapefile.svg b/docs/images/guides/geoGuide/writeShapefile2usaStatesPlotFromShapefile.svg
index 7a2b670ae..7ea603650 100644
--- a/docs/images/guides/geoGuide/writeShapefile2usaStatesPlotFromShapefile.svg
+++ b/docs/images/guides/geoGuide/writeShapefile2usaStatesPlotFromShapefile.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 34.210051452591955 L0.0 435.789948547408 L705.0 435.789948547408 L705.0 34.210051452591955 Z">
     </path>
     <g transform="translate(21.0 40.210051452591955 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 355.5798970948161)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 355.5798970948161)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -371,7 +371,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="355.5798970948161">
             </rect>
           </clipPath>
@@ -495,6 +495,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 34.210051452591955 L0.0 435.789948547408 L705.0 435.789948547408 L705.0 34.210051452591955 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoGuide/writeShapefile2usaStatesPlotFromShapefile_dark.svg b/docs/images/guides/geoGuide/writeShapefile2usaStatesPlotFromShapefile_dark.svg
index 2d3ccdd57..393f09b46 100644
--- a/docs/images/guides/geoGuide/writeShapefile2usaStatesPlotFromShapefile_dark.svg
+++ b/docs/images/guides/geoGuide/writeShapefile2usaStatesPlotFromShapefile_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 34.210051452591955 L0.0 435.789948547408 L705.0 435.789948547408 L705.0 34.210051452591955 Z">
     </path>
     <g transform="translate(21.0 40.210051452591955 ) ">
@@ -269,7 +269,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 355.5798970948161)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 355.5798970948161)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -473,7 +473,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="355.5798970948161">
             </rect>
           </clipPath>
@@ -495,6 +495,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 34.210051452591955 L0.0 435.789948547408 L705.0 435.789948547408 L705.0 34.210051452591955 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideAlgebraicCurvePlot.svg b/docs/images/guides/geoms/guideAlgebraicCurvePlot.svg
index 5207e3a05..925559ea8 100644
--- a/docs/images/guides/geoms/guideAlgebraicCurvePlot.svg
+++ b/docs/images/guides/geoms/guideAlgebraicCurvePlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M106.0 0.0 L106.0 528.0 L599.0 528.0 L599.0 0.0 Z">
     </path>
     <g transform="translate(112.0 41.0 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (481.0, 481.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (481.0, 481.0)]">
         <g transform="">
           <g>
             <g>
@@ -157,7 +157,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="481.0" height="481.0">
             </rect>
           </clipPath>
@@ -179,6 +179,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M106.0 0.0 L106.0 528.0 L599.0 528.0 L599.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideAlgebraicCurvePlot_dark.svg b/docs/images/guides/geoms/guideAlgebraicCurvePlot_dark.svg
index ada0f67af..b6755db44 100644
--- a/docs/images/guides/geoms/guideAlgebraicCurvePlot_dark.svg
+++ b/docs/images/guides/geoms/guideAlgebraicCurvePlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M106.0 0.0 L106.0 528.0 L599.0 528.0 L599.0 0.0 Z">
     </path>
     <g transform="translate(112.0 41.0 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (481.0, 481.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (481.0, 481.0)]">
         <g transform="">
           <g>
             <g>
@@ -157,7 +157,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="481.0" height="481.0">
             </rect>
           </clipPath>
@@ -179,6 +179,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M106.0 0.0 L106.0 528.0 L599.0 528.0 L599.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideErrorBarsConfiguredPointRanges.svg b/docs/images/guides/geoms/guideErrorBarsConfiguredPointRanges.svg
index ffb07cf4a..744431d06 100644
--- a/docs/images/guides/geoms/guideErrorBarsConfiguredPointRanges.svg
+++ b/docs/images/guides/geoms/guideErrorBarsConfiguredPointRanges.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 356.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 356.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -231,13 +231,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="356.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="356.0">
             </rect>
           </clipPath>
@@ -444,6 +444,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideErrorBarsConfiguredPointRanges_dark.svg b/docs/images/guides/geoms/guideErrorBarsConfiguredPointRanges_dark.svg
index 32246c391..396282fd8 100644
--- a/docs/images/guides/geoms/guideErrorBarsConfiguredPointRanges_dark.svg
+++ b/docs/images/guides/geoms/guideErrorBarsConfiguredPointRanges_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -291,7 +291,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 356.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 356.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -351,13 +351,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="356.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="356.0">
             </rect>
           </clipPath>
@@ -444,6 +444,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideErrorBarsCrossbars.svg b/docs/images/guides/geoms/guideErrorBarsCrossbars.svg
index 38da68d4b..d3d49adaa 100644
--- a/docs/images/guides/geoms/guideErrorBarsCrossbars.svg
+++ b/docs/images/guides/geoms/guideErrorBarsCrossbars.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -177,7 +177,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 356.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 356.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -209,7 +209,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="356.0">
             </rect>
           </clipPath>
@@ -425,6 +425,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideErrorBarsCrossbars_dark.svg b/docs/images/guides/geoms/guideErrorBarsCrossbars_dark.svg
index 299ea2d72..2eedc9edc 100644
--- a/docs/images/guides/geoms/guideErrorBarsCrossbars_dark.svg
+++ b/docs/images/guides/geoms/guideErrorBarsCrossbars_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -324,7 +324,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 356.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 356.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -356,7 +356,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="356.0">
             </rect>
           </clipPath>
@@ -425,6 +425,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideErrorBarsLineRanges.svg b/docs/images/guides/geoms/guideErrorBarsLineRanges.svg
index 2ff5a7155..09e083d14 100644
--- a/docs/images/guides/geoms/guideErrorBarsLineRanges.svg
+++ b/docs/images/guides/geoms/guideErrorBarsLineRanges.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 356.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 356.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -201,13 +201,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="356.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="356.0">
             </rect>
           </clipPath>
@@ -400,6 +400,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideErrorBarsLineRanges_dark.svg b/docs/images/guides/geoms/guideErrorBarsLineRanges_dark.svg
index 46f4c4c32..2df933bb5 100644
--- a/docs/images/guides/geoms/guideErrorBarsLineRanges_dark.svg
+++ b/docs/images/guides/geoms/guideErrorBarsLineRanges_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -291,7 +291,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 356.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 356.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -321,13 +321,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="356.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="356.0">
             </rect>
           </clipPath>
@@ -400,6 +400,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideErrorBarsOnBars.svg b/docs/images/guides/geoms/guideErrorBarsOnBars.svg
index 6d8df440b..2b8874388 100644
--- a/docs/images/guides/geoms/guideErrorBarsOnBars.svg
+++ b/docs/images/guides/geoms/guideErrorBarsOnBars.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -333,7 +333,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 356.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 356.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -403,13 +403,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="356.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="356.0">
             </rect>
           </clipPath>
@@ -474,6 +474,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideErrorBarsOnBars_dark.svg b/docs/images/guides/geoms/guideErrorBarsOnBars_dark.svg
index 73199bf17..ad13a1d26 100644
--- a/docs/images/guides/geoms/guideErrorBarsOnBars_dark.svg
+++ b/docs/images/guides/geoms/guideErrorBarsOnBars_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -333,7 +333,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 356.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 356.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -403,13 +403,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="356.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="356.0">
             </rect>
           </clipPath>
@@ -474,6 +474,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideErrorBarsPointRanges.svg b/docs/images/guides/geoms/guideErrorBarsPointRanges.svg
index 1b00da2aa..d7e7a29bc 100644
--- a/docs/images/guides/geoms/guideErrorBarsPointRanges.svg
+++ b/docs/images/guides/geoms/guideErrorBarsPointRanges.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 356.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 356.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -231,13 +231,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="356.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="356.0">
             </rect>
           </clipPath>
@@ -444,6 +444,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideErrorBarsPointRanges_dark.svg b/docs/images/guides/geoms/guideErrorBarsPointRanges_dark.svg
index d71224eec..c0254ce5a 100644
--- a/docs/images/guides/geoms/guideErrorBarsPointRanges_dark.svg
+++ b/docs/images/guides/geoms/guideErrorBarsPointRanges_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -291,7 +291,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 356.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 356.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -351,13 +351,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="356.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="356.0">
             </rect>
           </clipPath>
@@ -444,6 +444,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideErrorBarsWithLines.svg b/docs/images/guides/geoms/guideErrorBarsWithLines.svg
index b34586a8f..78008038f 100644
--- a/docs/images/guides/geoms/guideErrorBarsWithLines.svg
+++ b/docs/images/guides/geoms/guideErrorBarsWithLines.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -251,19 +251,19 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="424.0">
             </rect>
           </clipPath>
@@ -483,6 +483,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideErrorBarsWithLinesAndPosition.svg b/docs/images/guides/geoms/guideErrorBarsWithLinesAndPosition.svg
index dcf64c7f9..62defa6e1 100644
--- a/docs/images/guides/geoms/guideErrorBarsWithLinesAndPosition.svg
+++ b/docs/images/guides/geoms/guideErrorBarsWithLinesAndPosition.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -251,19 +251,19 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="424.0">
             </rect>
           </clipPath>
@@ -483,6 +483,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideErrorBarsWithLinesAndPosition_dark.svg b/docs/images/guides/geoms/guideErrorBarsWithLinesAndPosition_dark.svg
index 0f6fdebd5..0bc514bf7 100644
--- a/docs/images/guides/geoms/guideErrorBarsWithLinesAndPosition_dark.svg
+++ b/docs/images/guides/geoms/guideErrorBarsWithLinesAndPosition_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -302,7 +302,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -380,19 +380,19 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="424.0">
             </rect>
           </clipPath>
@@ -483,6 +483,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideErrorBarsWithLinesCustomColorScale.svg b/docs/images/guides/geoms/guideErrorBarsWithLinesCustomColorScale.svg
index 809701a1f..bc429a104 100644
--- a/docs/images/guides/geoms/guideErrorBarsWithLinesCustomColorScale.svg
+++ b/docs/images/guides/geoms/guideErrorBarsWithLinesCustomColorScale.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -302,7 +302,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 340.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 340.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -380,19 +380,19 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="340.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="340.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="340.0">
             </rect>
           </clipPath>
@@ -472,6 +472,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideErrorBarsWithLinesCustomColorScale_dark.svg b/docs/images/guides/geoms/guideErrorBarsWithLinesCustomColorScale_dark.svg
index 0e9ae2a31..d34073799 100644
--- a/docs/images/guides/geoms/guideErrorBarsWithLinesCustomColorScale_dark.svg
+++ b/docs/images/guides/geoms/guideErrorBarsWithLinesCustomColorScale_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -302,7 +302,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 340.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 340.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -380,19 +380,19 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="340.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="340.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="340.0">
             </rect>
           </clipPath>
@@ -472,6 +472,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideErrorBarsWithLinesGrouped.svg b/docs/images/guides/geoms/guideErrorBarsWithLinesGrouped.svg
index d5e05c808..51996206b 100644
--- a/docs/images/guides/geoms/guideErrorBarsWithLinesGrouped.svg
+++ b/docs/images/guides/geoms/guideErrorBarsWithLinesGrouped.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -251,19 +251,19 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="424.0">
             </rect>
           </clipPath>
@@ -467,6 +467,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideErrorBarsWithLinesGrouped_dark.svg b/docs/images/guides/geoms/guideErrorBarsWithLinesGrouped_dark.svg
index 0205f3c40..8775f33ec 100644
--- a/docs/images/guides/geoms/guideErrorBarsWithLinesGrouped_dark.svg
+++ b/docs/images/guides/geoms/guideErrorBarsWithLinesGrouped_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -302,7 +302,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -380,19 +380,19 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="424.0">
             </rect>
           </clipPath>
@@ -467,6 +467,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideErrorBarsWithLines_dark.svg b/docs/images/guides/geoms/guideErrorBarsWithLines_dark.svg
index 48765c839..6729a53a0 100644
--- a/docs/images/guides/geoms/guideErrorBarsWithLines_dark.svg
+++ b/docs/images/guides/geoms/guideErrorBarsWithLines_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -302,7 +302,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (603.353362675254, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -380,19 +380,19 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="17.961210910936405" y="0.0" width="603.353362675254" height="424.0">
             </rect>
           </clipPath>
@@ -483,6 +483,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideJitterPointsSimplePoints.svg b/docs/images/guides/geoms/guideJitterPointsSimplePoints.svg
index 27f8628e8..6af7f9610 100644
--- a/docs/images/guides/geoms/guideJitterPointsSimplePoints.svg
+++ b/docs/images/guides/geoms/guideJitterPointsSimplePoints.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -163,7 +163,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -409,7 +409,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -574,6 +574,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideJitterPointsSimplePoints_dark.svg b/docs/images/guides/geoms/guideJitterPointsSimplePoints_dark.svg
index 8426b677e..b89ff3dea 100644
--- a/docs/images/guides/geoms/guideJitterPointsSimplePoints_dark.svg
+++ b/docs/images/guides/geoms/guideJitterPointsSimplePoints_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -245,7 +245,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -491,7 +491,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -574,6 +574,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideLinesBrokenLinesLinePlot.svg b/docs/images/guides/geoms/guideLinesBrokenLinesLinePlot.svg
index 040017e1e..8426bde3c 100644
--- a/docs/images/guides/geoms/guideLinesBrokenLinesLinePlot.svg
+++ b/docs/images/guides/geoms/guideLinesBrokenLinesLinePlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -183,7 +183,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -323,6 +323,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideLinesBrokenLinesLinePlot_dark.svg b/docs/images/guides/geoms/guideLinesBrokenLinesLinePlot_dark.svg
index fe3b71065..326b1c7ce 100644
--- a/docs/images/guides/geoms/guideLinesBrokenLinesLinePlot_dark.svg
+++ b/docs/images/guides/geoms/guideLinesBrokenLinesLinePlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -301,7 +301,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -323,6 +323,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideLinesBrokenLinesPathPlot.svg b/docs/images/guides/geoms/guideLinesBrokenLinesPathPlot.svg
index 040017e1e..8426bde3c 100644
--- a/docs/images/guides/geoms/guideLinesBrokenLinesPathPlot.svg
+++ b/docs/images/guides/geoms/guideLinesBrokenLinesPathPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -183,7 +183,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -323,6 +323,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideLinesBrokenLinesPathPlot_dark.svg b/docs/images/guides/geoms/guideLinesBrokenLinesPathPlot_dark.svg
index fe3b71065..326b1c7ce 100644
--- a/docs/images/guides/geoms/guideLinesBrokenLinesPathPlot_dark.svg
+++ b/docs/images/guides/geoms/guideLinesBrokenLinesPathPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -301,7 +301,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -323,6 +323,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideLinesBrokenLinesStepPlot.svg b/docs/images/guides/geoms/guideLinesBrokenLinesStepPlot.svg
index a86fa1045..67a6c5625 100644
--- a/docs/images/guides/geoms/guideLinesBrokenLinesStepPlot.svg
+++ b/docs/images/guides/geoms/guideLinesBrokenLinesStepPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -183,7 +183,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -323,6 +323,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideLinesBrokenLinesStepPlot_dark.svg b/docs/images/guides/geoms/guideLinesBrokenLinesStepPlot_dark.svg
index c604d6edd..595f057d1 100644
--- a/docs/images/guides/geoms/guideLinesBrokenLinesStepPlot_dark.svg
+++ b/docs/images/guides/geoms/guideLinesBrokenLinesStepPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -301,7 +301,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -323,6 +323,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideLinesCompareLinePathSegmentsPlotBunch.svg b/docs/images/guides/geoms/guideLinesCompareLinePathSegmentsPlotBunch.svg
index 04abd19d2..35957cfd0 100644
--- a/docs/images/guides/geoms/guideLinesCompareLinePathSegmentsPlotBunch.svg
+++ b/docs/images/guides/geoms/guideLinesCompareLinePathSegmentsPlotBunch.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="533.3333333333334" width="800.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 260.6666666666667 L394.0 260.6666666666667 L394.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -298,7 +298,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (335.9846933242504, 198.66666666666669)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (335.9846933242504, 198.66666666666669)]">
           <g transform="translate(31.015306675749617 0.0 ) ">
             <g>
               <g>
@@ -310,7 +310,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="31.015306675749617" y="0.0" width="335.9846933242504" height="198.66666666666669">
               </rect>
             </clipPath>
@@ -421,7 +421,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 260.6666666666667 L394.0 260.6666666666667 L394.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="394.0" height="260.6666666666667" x="400.0" y="6.0">
@@ -436,117 +436,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -555,7 +555,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 260.6666666666667 L394.0 260.6666666666667 L394.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -589,7 +589,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (335.9846933242504, 198.66666666666669)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (335.9846933242504, 198.66666666666669)]">
           <g transform="translate(31.015306675749617 0.0 ) ">
             <g>
               <g>
@@ -601,7 +601,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="31.015306675749617" y="0.0" width="335.9846933242504" height="198.66666666666669">
               </rect>
             </clipPath>
@@ -712,7 +712,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 260.6666666666667 L394.0 260.6666666666667 L394.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="394.0" height="260.6666666666667" x="400.0" y="266.6666666666667">
@@ -727,117 +727,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx7 .plot-title {
+#_sample_helper_static_id_prefix_7 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx7 .plot-subtitle {
+#_sample_helper_static_id_prefix_7 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .plot-caption {
+#_sample_helper_static_id_prefix_7 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .hyperlink-element {
+#_sample_helper_static_id_prefix_7 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx7 .legend-title {
+#_sample_helper_static_id_prefix_7 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .legend-item {
+#_sample_helper_static_id_prefix_7 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-x {
+#_sample_helper_static_id_prefix_7 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-x {
+#_sample_helper_static_id_prefix_7 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-y {
+#_sample_helper_static_id_prefix_7 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-y {
+#_sample_helper_static_id_prefix_7 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-text {
+#_sample_helper_static_id_prefix_9 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-title {
+#_sample_helper_static_id_prefix_9 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-label {
+#_sample_helper_static_id_prefix_9 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -846,7 +846,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx7">
+    <g id="_sample_helper_static_id_prefix_7">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 260.6666666666667 L394.0 260.6666666666667 L394.0 0.0 Z">
       </path>
       <g transform="translate(21.0 6.0 ) ">
@@ -880,7 +880,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (335.9846933242504, 214.66666666666669)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (335.9846933242504, 214.66666666666669)]">
           <g transform="translate(31.015306675749617 0.0 ) ">
             <g>
               <g>
@@ -988,7 +988,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx8">
+            <clipPath id="_sample_helper_static_id_prefix_8">
               <rect x="31.015306675749617" y="0.0" width="335.9846933242504" height="214.66666666666669">
               </rect>
             </clipPath>
@@ -1094,7 +1094,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 260.6666666666667 L394.0 260.6666666666667 L394.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx9">
+    <g id="_sample_helper_static_id_prefix_9">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideLinesCompareLinePathSegmentsPlotBunch_dark.svg b/docs/images/guides/geoms/guideLinesCompareLinePathSegmentsPlotBunch_dark.svg
index d58acb64d..5eea73614 100644
--- a/docs/images/guides/geoms/guideLinesCompareLinePathSegmentsPlotBunch_dark.svg
+++ b/docs/images/guides/geoms/guideLinesCompareLinePathSegmentsPlotBunch_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="533.3333333333334" width="800.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 260.6666666666667 L394.0 260.6666666666667 L394.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -382,7 +382,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (335.9846933242504, 198.66666666666669)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (335.9846933242504, 198.66666666666669)]">
           <g transform="translate(31.015306675749617 0.0 ) ">
             <g>
               <g>
@@ -394,7 +394,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="31.015306675749617" y="0.0" width="335.9846933242504" height="198.66666666666669">
               </rect>
             </clipPath>
@@ -421,7 +421,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 260.6666666666667 L394.0 260.6666666666667 L394.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="394.0" height="260.6666666666667" x="400.0" y="6.0">
@@ -436,117 +436,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -555,7 +555,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 260.6666666666667 L394.0 260.6666666666667 L394.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -673,7 +673,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (335.9846933242504, 198.66666666666669)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (335.9846933242504, 198.66666666666669)]">
           <g transform="translate(31.015306675749617 0.0 ) ">
             <g>
               <g>
@@ -685,7 +685,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="31.015306675749617" y="0.0" width="335.9846933242504" height="198.66666666666669">
               </rect>
             </clipPath>
@@ -712,7 +712,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 260.6666666666667 L394.0 260.6666666666667 L394.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="394.0" height="260.6666666666667" x="400.0" y="266.6666666666667">
@@ -727,117 +727,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx7 .plot-title {
+#_sample_helper_static_id_prefix_7 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx7 .plot-subtitle {
+#_sample_helper_static_id_prefix_7 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .plot-caption {
+#_sample_helper_static_id_prefix_7 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .hyperlink-element {
+#_sample_helper_static_id_prefix_7 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx7 .legend-title {
+#_sample_helper_static_id_prefix_7 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .legend-item {
+#_sample_helper_static_id_prefix_7 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-x {
+#_sample_helper_static_id_prefix_7 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-x {
+#_sample_helper_static_id_prefix_7 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-y {
+#_sample_helper_static_id_prefix_7 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-y {
+#_sample_helper_static_id_prefix_7 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-text {
+#_sample_helper_static_id_prefix_9 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-title {
+#_sample_helper_static_id_prefix_9 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-label {
+#_sample_helper_static_id_prefix_9 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -846,7 +846,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx7">
+    <g id="_sample_helper_static_id_prefix_7">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 260.6666666666667 L394.0 260.6666666666667 L394.0 0.0 Z">
       </path>
       <g transform="translate(21.0 6.0 ) ">
@@ -964,7 +964,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (335.9846933242504, 214.66666666666669)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (335.9846933242504, 214.66666666666669)]">
           <g transform="translate(31.015306675749617 0.0 ) ">
             <g>
               <g>
@@ -1072,7 +1072,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx8">
+            <clipPath id="_sample_helper_static_id_prefix_8">
               <rect x="31.015306675749617" y="0.0" width="335.9846933242504" height="214.66666666666669">
               </rect>
             </clipPath>
@@ -1094,7 +1094,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 260.6666666666667 L394.0 260.6666666666667 L394.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx9">
+    <g id="_sample_helper_static_id_prefix_9">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideLinesSmoothLinear.svg b/docs/images/guides/geoms/guideLinesSmoothLinear.svg
index b698d97ce..f487e03d4 100644
--- a/docs/images/guides/geoms/guideLinesSmoothLinear.svg
+++ b/docs/images/guides/geoms/guideLinesSmoothLinear.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_5 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_5 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .tooltip-text {
+#_sample_helper_static_id_prefix_5 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .tooltip-title {
+#_sample_helper_static_id_prefix_5 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .tooltip-label {
+#_sample_helper_static_id_prefix_5 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -429,25 +429,25 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -578,6 +578,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx5">
+  <g id="_sample_helper_static_id_prefix_5">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideLinesSmoothLinear_dark.svg b/docs/images/guides/geoms/guideLinesSmoothLinear_dark.svg
index fe29615bd..294e476f3 100644
--- a/docs/images/guides/geoms/guideLinesSmoothLinear_dark.svg
+++ b/docs/images/guides/geoms/guideLinesSmoothLinear_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_5 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_5 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .tooltip-text {
+#_sample_helper_static_id_prefix_5 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .tooltip-title {
+#_sample_helper_static_id_prefix_5 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .tooltip-label {
+#_sample_helper_static_id_prefix_5 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -538,25 +538,25 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -578,6 +578,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx5">
+  <g id="_sample_helper_static_id_prefix_5">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guidePieBasicPieChart.svg b/docs/images/guides/geoms/guidePieBasicPieChart.svg
index 7a42d575b..36a83f257 100644
--- a/docs/images/guides/geoms/guidePieBasicPieChart.svg
+++ b/docs/images/guides/geoms/guidePieBasicPieChart.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (596.2455058123539, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (596.2455058123539, 424.0)]">
         <g transform="translate(31.015306675749617 0.0 ) ">
           <g>
             <g>
@@ -255,7 +255,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.015306675749617" y="0.0" width="596.2455058123539" height="424.0">
             </rect>
           </clipPath>
@@ -532,6 +532,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guidePieBasicPieChart_dark.svg b/docs/images/guides/geoms/guidePieBasicPieChart_dark.svg
index e2109d87e..25cf45a95 100644
--- a/docs/images/guides/geoms/guidePieBasicPieChart_dark.svg
+++ b/docs/images/guides/geoms/guidePieBasicPieChart_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -369,7 +369,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (596.2455058123539, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (596.2455058123539, 424.0)]">
         <g transform="translate(31.015306675749617 0.0 ) ">
           <g>
             <g>
@@ -437,7 +437,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.015306675749617" y="0.0" width="596.2455058123539" height="424.0">
             </rect>
           </clipPath>
@@ -532,6 +532,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guidePieChartsInPlotGrid.svg b/docs/images/guides/geoms/guidePieChartsInPlotGrid.svg
index cefb919db..a9be63e58 100644
--- a/docs/images/guides/geoms/guidePieChartsInPlotGrid.svg
+++ b/docs/images/guides/geoms/guidePieChartsInPlotGrid.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="235.0" width="705.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z">
       </path>
       <g transform="translate(6.0 6.0 ) ">
@@ -282,7 +282,7 @@ font-size: 13.0px;
           <g transform="">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (0.0, 0.0), (237.7785026964189, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (0.0, 0.0), (237.7785026964189, 211.0)]">
           <g transform="">
             <g>
               <g>
@@ -338,7 +338,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="0.0" y="0.0" width="237.7785026964189" height="211.0">
               </rect>
             </clipPath>
@@ -423,7 +423,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="344.5" height="223.0" x="354.5" y="6.0">
@@ -438,117 +438,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -557,7 +557,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z">
       </path>
       <g transform="translate(6.0 6.0 ) ">
@@ -575,7 +575,7 @@ font-size: 13.0px;
           <g transform="">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (0.0, 0.0), (237.7785026964189, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (0.0, 0.0), (237.7785026964189, 211.0)]">
           <g transform="">
             <g>
               <g>
@@ -631,7 +631,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="0.0" y="0.0" width="237.7785026964189" height="211.0">
               </rect>
             </clipPath>
@@ -716,7 +716,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guidePieChartsInPlotGrid_dark.svg b/docs/images/guides/geoms/guidePieChartsInPlotGrid_dark.svg
index 76f3758d3..7418b99a1 100644
--- a/docs/images/guides/geoms/guidePieChartsInPlotGrid_dark.svg
+++ b/docs/images/guides/geoms/guidePieChartsInPlotGrid_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="235.0" width="705.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z">
       </path>
       <g transform="translate(6.0 6.0 ) ">
@@ -282,7 +282,7 @@ font-size: 13.0px;
           <g transform="">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (0.0, 0.0), (237.7785026964189, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (0.0, 0.0), (237.7785026964189, 211.0)]">
           <g transform="">
             <g>
               <g>
@@ -338,7 +338,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="0.0" y="0.0" width="237.7785026964189" height="211.0">
               </rect>
             </clipPath>
@@ -423,7 +423,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="344.5" height="223.0" x="354.5" y="6.0">
@@ -438,117 +438,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -557,7 +557,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z">
       </path>
       <g transform="translate(6.0 6.0 ) ">
@@ -575,7 +575,7 @@ font-size: 13.0px;
           <g transform="">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (0.0, 0.0), (237.7785026964189, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (0.0, 0.0), (237.7785026964189, 211.0)]">
           <g transform="">
             <g>
               <g>
@@ -631,7 +631,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="0.0" y="0.0" width="237.7785026964189" height="211.0">
               </rect>
             </clipPath>
@@ -716,7 +716,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guidePieCustomizedPieChart.svg b/docs/images/guides/geoms/guidePieCustomizedPieChart.svg
index 9af44095c..6ae01c444 100644
--- a/docs/images/guides/geoms/guidePieCustomizedPieChart.svg
+++ b/docs/images/guides/geoms/guidePieCustomizedPieChart.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(6.0 6.0 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (642.2608124881035, 458.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (642.2608124881035, 458.0)]">
         <g transform="">
           <g>
             <g>
@@ -215,7 +215,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="642.2608124881035" height="458.0">
             </rect>
           </clipPath>
@@ -300,6 +300,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guidePieCustomizedPieChart_dark.svg b/docs/images/guides/geoms/guidePieCustomizedPieChart_dark.svg
index 1becbbbfb..0433bff43 100644
--- a/docs/images/guides/geoms/guidePieCustomizedPieChart_dark.svg
+++ b/docs/images/guides/geoms/guidePieCustomizedPieChart_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(6.0 6.0 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (642.2608124881035, 458.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (642.2608124881035, 458.0)]">
         <g transform="">
           <g>
             <g>
@@ -215,7 +215,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="642.2608124881035" height="458.0">
             </rect>
           </clipPath>
@@ -300,6 +300,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guidePieExplodePieChart.svg b/docs/images/guides/geoms/guidePieExplodePieChart.svg
index 95e30dc0b..8771cc4ba 100644
--- a/docs/images/guides/geoms/guidePieExplodePieChart.svg
+++ b/docs/images/guides/geoms/guidePieExplodePieChart.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(6.0 6.0 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (583.7064892974045, 458.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (583.7064892974045, 458.0)]">
         <g transform="">
           <g>
             <g>
@@ -263,7 +263,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="583.7064892974045" height="458.0">
             </rect>
           </clipPath>
@@ -423,6 +423,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guidePieExplodePieChart_dark.svg b/docs/images/guides/geoms/guidePieExplodePieChart_dark.svg
index 1dafd9719..caab5dc3d 100644
--- a/docs/images/guides/geoms/guidePieExplodePieChart_dark.svg
+++ b/docs/images/guides/geoms/guidePieExplodePieChart_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(6.0 6.0 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (583.7064892974045, 458.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (583.7064892974045, 458.0)]">
         <g transform="">
           <g>
             <g>
@@ -263,7 +263,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="583.7064892974045" height="458.0">
             </rect>
           </clipPath>
@@ -423,6 +423,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideRibbonPlot.svg b/docs/images/guides/geoms/guideRibbonPlot.svg
index 6ee4a4f22..c8840ef75 100644
--- a/docs/images/guides/geoms/guideRibbonPlot.svg
+++ b/docs/images/guides/geoms/guideRibbonPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -193,7 +193,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -340,6 +340,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideRibbonPlot_dark.svg b/docs/images/guides/geoms/guideRibbonPlot_dark.svg
index 081364a9c..ba02d7d4a 100644
--- a/docs/images/guides/geoms/guideRibbonPlot_dark.svg
+++ b/docs/images/guides/geoms/guideRibbonPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -298,7 +298,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -318,7 +318,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -340,6 +340,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideScatterBasicScatterPlot.svg b/docs/images/guides/geoms/guideScatterBasicScatterPlot.svg
index bc0a0a52c..7e49961af 100644
--- a/docs/images/guides/geoms/guideScatterBasicScatterPlot.svg
+++ b/docs/images/guides/geoms/guideScatterBasicScatterPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -219,7 +219,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -421,6 +421,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideScatterBasicScatterPlot_dark.svg b/docs/images/guides/geoms/guideScatterBasicScatterPlot_dark.svg
index ad021c17f..151e5d046 100644
--- a/docs/images/guides/geoms/guideScatterBasicScatterPlot_dark.svg
+++ b/docs/images/guides/geoms/guideScatterBasicScatterPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -367,7 +367,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -399,7 +399,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -421,6 +421,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideScatterHandlingOverPlotting.svg b/docs/images/guides/geoms/guideScatterHandlingOverPlotting.svg
index 95865dd88..b172df2e5 100644
--- a/docs/images/guides/geoms/guideScatterHandlingOverPlotting.svg
+++ b/docs/images/guides/geoms/guideScatterHandlingOverPlotting.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 306.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 306.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -199,7 +199,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="306.0">
             </rect>
           </clipPath>
@@ -319,6 +319,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideScatterHandlingOverPlotting_dark.svg b/docs/images/guides/geoms/guideScatterHandlingOverPlotting_dark.svg
index 176d7db49..8abaa0d65 100644
--- a/docs/images/guides/geoms/guideScatterHandlingOverPlotting_dark.svg
+++ b/docs/images/guides/geoms/guideScatterHandlingOverPlotting_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -265,7 +265,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 306.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 306.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -297,7 +297,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="306.0">
             </rect>
           </clipPath>
@@ -319,6 +319,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideScatterScatterPlotWithDiffSymbol.svg b/docs/images/guides/geoms/guideScatterScatterPlotWithDiffSymbol.svg
index 4dd64e4e4..8a0ff6a6a 100644
--- a/docs/images/guides/geoms/guideScatterScatterPlotWithDiffSymbol.svg
+++ b/docs/images/guides/geoms/guideScatterScatterPlotWithDiffSymbol.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (613.2009245182917, 306.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (613.2009245182917, 306.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -205,7 +205,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="613.2009245182917" height="306.0">
             </rect>
           </clipPath>
@@ -403,6 +403,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideScatterScatterPlotWithDiffSymbol_dark.svg b/docs/images/guides/geoms/guideScatterScatterPlotWithDiffSymbol_dark.svg
index 51ecdd5dd..6cf02d70d 100644
--- a/docs/images/guides/geoms/guideScatterScatterPlotWithDiffSymbol_dark.svg
+++ b/docs/images/guides/geoms/guideScatterScatterPlotWithDiffSymbol_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -304,7 +304,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (613.2009245182917, 306.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (613.2009245182917, 306.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -336,7 +336,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="613.2009245182917" height="306.0">
             </rect>
           </clipPath>
@@ -403,6 +403,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideScatterScatterPlotWithOpenSymbol.svg b/docs/images/guides/geoms/guideScatterScatterPlotWithOpenSymbol.svg
index 320747f26..de7861850 100644
--- a/docs/images/guides/geoms/guideScatterScatterPlotWithOpenSymbol.svg
+++ b/docs/images/guides/geoms/guideScatterScatterPlotWithOpenSymbol.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (613.2009245182917, 306.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (613.2009245182917, 306.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -205,7 +205,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="613.2009245182917" height="306.0">
             </rect>
           </clipPath>
@@ -403,6 +403,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideScatterScatterPlotWithOpenSymbol_dark.svg b/docs/images/guides/geoms/guideScatterScatterPlotWithOpenSymbol_dark.svg
index 236dd177f..d9fe88c84 100644
--- a/docs/images/guides/geoms/guideScatterScatterPlotWithOpenSymbol_dark.svg
+++ b/docs/images/guides/geoms/guideScatterScatterPlotWithOpenSymbol_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -304,7 +304,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (613.2009245182917, 306.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (613.2009245182917, 306.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -336,7 +336,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="613.2009245182917" height="306.0">
             </rect>
           </clipPath>
@@ -403,6 +403,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideLabelConfigureTooltips.svg b/docs/images/guides/layout/guideLabelConfigureTooltips.svg
index dd43cf133..29a411be9 100644
--- a/docs/images/guides/layout/guideLabelConfigureTooltips.svg
+++ b/docs/images/guides/layout/guideLabelConfigureTooltips.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 313.0 L705.0 313.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (49.92376780579295, 0.0), (628.076232194207, 267.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (49.92376780579295, 0.0), (628.076232194207, 267.0)]">
         <g transform="translate(49.92376780579295 0.0 ) ">
           <g>
             <g>
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="49.92376780579295" y="0.0" width="628.076232194207" height="267.0">
             </rect>
           </clipPath>
@@ -305,6 +305,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 313.0 L705.0 313.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideLabelConfigureTooltips_dark.svg b/docs/images/guides/layout/guideLabelConfigureTooltips_dark.svg
index 3026cdf30..ce558467e 100644
--- a/docs/images/guides/layout/guideLabelConfigureTooltips_dark.svg
+++ b/docs/images/guides/layout/guideLabelConfigureTooltips_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 313.0 L705.0 313.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -271,7 +271,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (49.92376780579295, 0.0), (628.076232194207, 267.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (49.92376780579295, 0.0), (628.076232194207, 267.0)]">
         <g transform="translate(49.92376780579295 0.0 ) ">
           <g>
             <g>
@@ -283,7 +283,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="49.92376780579295" y="0.0" width="628.076232194207" height="267.0">
             </rect>
           </clipPath>
@@ -305,6 +305,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 313.0 L705.0 313.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideLabelDefaultPlot.svg b/docs/images/guides/layout/guideLabelDefaultPlot.svg
index e31263119..efcb359e1 100644
--- a/docs/images/guides/layout/guideLabelDefaultPlot.svg
+++ b/docs/images/guides/layout/guideLabelDefaultPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 313.0 L705.0 313.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 267.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 267.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="267.0">
             </rect>
           </clipPath>
@@ -305,6 +305,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 313.0 L705.0 313.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideLabelDefaultPlot_dark.svg b/docs/images/guides/layout/guideLabelDefaultPlot_dark.svg
index 39cb386e1..aa712746d 100644
--- a/docs/images/guides/layout/guideLabelDefaultPlot_dark.svg
+++ b/docs/images/guides/layout/guideLabelDefaultPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 313.0 L705.0 313.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -271,7 +271,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 267.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 267.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -283,7 +283,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="267.0">
             </rect>
           </clipPath>
@@ -305,6 +305,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 313.0 L705.0 313.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideLabelFormatValueTooltip.svg b/docs/images/guides/layout/guideLabelFormatValueTooltip.svg
index e31263119..efcb359e1 100644
--- a/docs/images/guides/layout/guideLabelFormatValueTooltip.svg
+++ b/docs/images/guides/layout/guideLabelFormatValueTooltip.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 313.0 L705.0 313.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 267.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 267.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="267.0">
             </rect>
           </clipPath>
@@ -305,6 +305,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 313.0 L705.0 313.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideLabelFormatValueTooltip_dark.svg b/docs/images/guides/layout/guideLabelFormatValueTooltip_dark.svg
index 39cb386e1..aa712746d 100644
--- a/docs/images/guides/layout/guideLabelFormatValueTooltip_dark.svg
+++ b/docs/images/guides/layout/guideLabelFormatValueTooltip_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 313.0 L705.0 313.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -271,7 +271,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 267.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 267.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -283,7 +283,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="267.0">
             </rect>
           </clipPath>
@@ -305,6 +305,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 313.0 L705.0 313.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideLabelFormattingBreaksManually.svg b/docs/images/guides/layout/guideLabelFormattingBreaksManually.svg
index 085e3a3ae..afaae8f71 100644
--- a/docs/images/guides/layout/guideLabelFormattingBreaksManually.svg
+++ b/docs/images/guides/layout/guideLabelFormattingBreaksManually.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 313.0 L705.0 313.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -163,7 +163,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (49.92376780579295, 0.0), (628.076232194207, 267.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (49.92376780579295, 0.0), (628.076232194207, 267.0)]">
         <g transform="translate(49.92376780579295 0.0 ) ">
           <g>
             <g>
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="49.92376780579295" y="0.0" width="628.076232194207" height="267.0">
             </rect>
           </clipPath>
@@ -287,6 +287,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 313.0 L705.0 313.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideLabelFormattingBreaksManually_dark.svg b/docs/images/guides/layout/guideLabelFormattingBreaksManually_dark.svg
index 172568fa0..3c5c76087 100644
--- a/docs/images/guides/layout/guideLabelFormattingBreaksManually_dark.svg
+++ b/docs/images/guides/layout/guideLabelFormattingBreaksManually_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 313.0 L705.0 313.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -253,7 +253,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (49.92376780579295, 0.0), (628.076232194207, 267.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (49.92376780579295, 0.0), (628.076232194207, 267.0)]">
         <g transform="translate(49.92376780579295 0.0 ) ">
           <g>
             <g>
@@ -265,7 +265,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="49.92376780579295" y="0.0" width="628.076232194207" height="267.0">
             </rect>
           </clipPath>
@@ -287,6 +287,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 313.0 L705.0 313.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideLabelFormattingXAndY.svg b/docs/images/guides/layout/guideLabelFormattingXAndY.svg
index dd43cf133..29a411be9 100644
--- a/docs/images/guides/layout/guideLabelFormattingXAndY.svg
+++ b/docs/images/guides/layout/guideLabelFormattingXAndY.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 313.0 L705.0 313.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (49.92376780579295, 0.0), (628.076232194207, 267.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (49.92376780579295, 0.0), (628.076232194207, 267.0)]">
         <g transform="translate(49.92376780579295 0.0 ) ">
           <g>
             <g>
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="49.92376780579295" y="0.0" width="628.076232194207" height="267.0">
             </rect>
           </clipPath>
@@ -305,6 +305,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 313.0 L705.0 313.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideLabelFormattingXAndY_dark.svg b/docs/images/guides/layout/guideLabelFormattingXAndY_dark.svg
index 3026cdf30..ce558467e 100644
--- a/docs/images/guides/layout/guideLabelFormattingXAndY_dark.svg
+++ b/docs/images/guides/layout/guideLabelFormattingXAndY_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 313.0 L705.0 313.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -271,7 +271,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (49.92376780579295, 0.0), (628.076232194207, 267.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (49.92376780579295, 0.0), (628.076232194207, 267.0)]">
         <g transform="translate(49.92376780579295 0.0 ) ">
           <g>
             <g>
@@ -283,7 +283,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="49.92376780579295" y="0.0" width="628.076232194207" height="267.0">
             </rect>
           </clipPath>
@@ -305,6 +305,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 313.0 L705.0 313.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideLabelMeanMarkLine.svg b/docs/images/guides/layout/guideLabelMeanMarkLine.svg
index 827bd3215..23d2b2a4d 100644
--- a/docs/images/guides/layout/guideLabelMeanMarkLine.svg
+++ b/docs/images/guides/layout/guideLabelMeanMarkLine.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 313.0 L705.0 313.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 251.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 251.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -192,19 +192,19 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="251.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="251.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="251.0">
             </rect>
           </clipPath>
@@ -335,6 +335,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 313.0 L705.0 313.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideLabelMeanMarkLine_dark.svg b/docs/images/guides/layout/guideLabelMeanMarkLine_dark.svg
index 41a7fc0cb..30e4a40f9 100644
--- a/docs/images/guides/layout/guideLabelMeanMarkLine_dark.svg
+++ b/docs/images/guides/layout/guideLabelMeanMarkLine_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 313.0 L705.0 313.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -271,7 +271,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 251.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 251.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -296,19 +296,19 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="251.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="251.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="251.0">
             </rect>
           </clipPath>
@@ -335,6 +335,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 313.0 L705.0 313.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideLegendAxisBottomLegend.svg b/docs/images/guides/layout/guideLegendAxisBottomLegend.svg
index d25d37f98..c1eec7b2d 100644
--- a/docs/images/guides/layout/guideLegendAxisBottomLegend.svg
+++ b/docs/images/guides/layout/guideLegendAxisBottomLegend.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(6.0 22.0 ) ">
@@ -308,7 +308,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (675.0387890890636, 230.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (675.0387890890636, 230.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -554,7 +554,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="675.0387890890636" height="230.0">
             </rect>
           </clipPath>
@@ -824,6 +824,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideLegendAxisBottomLegend_dark.svg b/docs/images/guides/layout/guideLegendAxisBottomLegend_dark.svg
index 6a76c3be4..47c5adac6 100644
--- a/docs/images/guides/layout/guideLegendAxisBottomLegend_dark.svg
+++ b/docs/images/guides/layout/guideLegendAxisBottomLegend_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(6.0 22.0 ) ">
@@ -308,7 +308,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (675.0387890890636, 230.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (675.0387890890636, 230.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -554,7 +554,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="675.0387890890636" height="230.0">
             </rect>
           </clipPath>
@@ -824,6 +824,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 402.0 L705.0 402.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideLegendAxisConfigureLegend.svg b/docs/images/guides/layout/guideLegendAxisConfigureLegend.svg
index fe2ef4fdc..d3ceeb394 100644
--- a/docs/images/guides/layout/guideLegendAxisConfigureLegend.svg
+++ b/docs/images/guides/layout/guideLegendAxisConfigureLegend.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -344,7 +344,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 306.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 306.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -590,7 +590,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="306.0">
             </rect>
           </clipPath>
@@ -782,6 +782,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideLegendAxisConfigureLegend_dark.svg b/docs/images/guides/layout/guideLegendAxisConfigureLegend_dark.svg
index f94cc86f3..45b5bf2a7 100644
--- a/docs/images/guides/layout/guideLegendAxisConfigureLegend_dark.svg
+++ b/docs/images/guides/layout/guideLegendAxisConfigureLegend_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -344,7 +344,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 306.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 306.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -590,7 +590,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="306.0">
             </rect>
           </clipPath>
@@ -782,6 +782,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideLegendAxisContinuousLegend.svg b/docs/images/guides/layout/guideLegendAxisContinuousLegend.svg
index 2d1ee2ffd..a2ff0300f 100644
--- a/docs/images/guides/layout/guideLegendAxisContinuousLegend.svg
+++ b/docs/images/guides/layout/guideLegendAxisContinuousLegend.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (607.0872754503931, 306.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (607.0872754503931, 306.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -415,7 +415,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="607.0872754503931" height="306.0">
             </rect>
           </clipPath>
@@ -716,6 +716,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideLegendAxisContinuousLegend_dark.svg b/docs/images/guides/layout/guideLegendAxisContinuousLegend_dark.svg
index 6e58f3fa2..fd26fb580 100644
--- a/docs/images/guides/layout/guideLegendAxisContinuousLegend_dark.svg
+++ b/docs/images/guides/layout/guideLegendAxisContinuousLegend_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (607.0872754503931, 306.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (607.0872754503931, 306.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="607.0872754503931" height="306.0">
             </rect>
           </clipPath>
@@ -716,6 +716,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideLegendAxisDefaultLegend.svg b/docs/images/guides/layout/guideLegendAxisDefaultLegend.svg
index 93bf439fe..64d4fd38a 100644
--- a/docs/images/guides/layout/guideLegendAxisDefaultLegend.svg
+++ b/docs/images/guides/layout/guideLegendAxisDefaultLegend.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 293.0 L705.0 293.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (542.7646729309998, 247.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (542.7646729309998, 247.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -415,7 +415,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="542.7646729309998" height="247.0">
             </rect>
           </clipPath>
@@ -799,6 +799,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 293.0 L705.0 293.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideLegendAxisDefaultLegend_dark.svg b/docs/images/guides/layout/guideLegendAxisDefaultLegend_dark.svg
index 01f11febd..9ce182ef5 100644
--- a/docs/images/guides/layout/guideLegendAxisDefaultLegend_dark.svg
+++ b/docs/images/guides/layout/guideLegendAxisDefaultLegend_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 293.0 L705.0 293.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (542.7646729309998, 247.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (542.7646729309998, 247.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="542.7646729309998" height="247.0">
             </rect>
           </clipPath>
@@ -799,6 +799,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 293.0 L705.0 293.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideLegendAxisFillingLegendCols.svg b/docs/images/guides/layout/guideLegendAxisFillingLegendCols.svg
index 5d2f237b9..b4dcb3728 100644
--- a/docs/images/guides/layout/guideLegendAxisFillingLegendCols.svg
+++ b/docs/images/guides/layout/guideLegendAxisFillingLegendCols.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 293.0 L705.0 293.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (443.60647350534236, 231.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (443.60647350534236, 231.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -415,7 +415,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="443.60647350534236" height="231.0">
             </rect>
           </clipPath>
@@ -804,6 +804,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 293.0 L705.0 293.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideLegendAxisFillingLegendCols_dark.svg b/docs/images/guides/layout/guideLegendAxisFillingLegendCols_dark.svg
index 8493ed3f6..22aa1a5d4 100644
--- a/docs/images/guides/layout/guideLegendAxisFillingLegendCols_dark.svg
+++ b/docs/images/guides/layout/guideLegendAxisFillingLegendCols_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 293.0 L705.0 293.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (443.60647350534236, 231.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (443.60647350534236, 231.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="443.60647350534236" height="231.0">
             </rect>
           </clipPath>
@@ -804,6 +804,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 293.0 L705.0 293.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideLegendAxisLegendHorizontalDirection.svg b/docs/images/guides/layout/guideLegendAxisLegendHorizontalDirection.svg
index fbf4eb234..648f58111 100644
--- a/docs/images/guides/layout/guideLegendAxisLegendHorizontalDirection.svg
+++ b/docs/images/guides/layout/guideLegendAxisLegendHorizontalDirection.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -344,7 +344,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 306.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 306.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -590,7 +590,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="306.0">
             </rect>
           </clipPath>
@@ -782,6 +782,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideLegendAxisLegendHorizontalDirection_dark.svg b/docs/images/guides/layout/guideLegendAxisLegendHorizontalDirection_dark.svg
index e880575e1..fd75d434a 100644
--- a/docs/images/guides/layout/guideLegendAxisLegendHorizontalDirection_dark.svg
+++ b/docs/images/guides/layout/guideLegendAxisLegendHorizontalDirection_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -344,7 +344,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 306.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 306.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -590,7 +590,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="306.0">
             </rect>
           </clipPath>
@@ -782,6 +782,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideLegendAxisTwoColumnsLegend.svg b/docs/images/guides/layout/guideLegendAxisTwoColumnsLegend.svg
index 161d24965..c6833d603 100644
--- a/docs/images/guides/layout/guideLegendAxisTwoColumnsLegend.svg
+++ b/docs/images/guides/layout/guideLegendAxisTwoColumnsLegend.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 293.0 L705.0 293.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (443.60647350534236, 231.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (443.60647350534236, 231.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -415,7 +415,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="443.60647350534236" height="231.0">
             </rect>
           </clipPath>
@@ -804,6 +804,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 293.0 L705.0 293.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideLegendAxisTwoColumnsLegend_dark.svg b/docs/images/guides/layout/guideLegendAxisTwoColumnsLegend_dark.svg
index f0f146791..6a604465f 100644
--- a/docs/images/guides/layout/guideLegendAxisTwoColumnsLegend_dark.svg
+++ b/docs/images/guides/layout/guideLegendAxisTwoColumnsLegend_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 293.0 L705.0 293.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (443.60647350534236, 231.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (443.60647350534236, 231.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="443.60647350534236" height="231.0">
             </rect>
           </clipPath>
@@ -804,6 +804,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 293.0 L705.0 293.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesAllPrepStyles.svg b/docs/images/guides/layout/guideStylesAllPrepStyles.svg
index 006f330df..5cf0c6049 100644
--- a/docs/images/guides/layout/guideStylesAllPrepStyles.svg
+++ b/docs/images/guides/layout/guideStylesAllPrepStyles.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="799.9999999999999" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -377,7 +377,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 197.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 197.99999999999994)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -623,7 +623,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="197.99999999999994">
               </rect>
             </clipPath>
@@ -650,7 +650,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="452.0" y="6.0">
@@ -665,117 +665,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -784,7 +784,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -921,7 +921,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1167,7 +1167,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="21.961210910936405" y="0.0" width="393.0387890890636" height="197.99999999999994">
               </rect>
             </clipPath>
@@ -1196,7 +1196,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="6.0" y="269.99999999999994">
@@ -1211,117 +1211,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx7 .plot-title {
+#_sample_helper_static_id_prefix_7 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx7 .plot-subtitle {
+#_sample_helper_static_id_prefix_7 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .plot-caption {
+#_sample_helper_static_id_prefix_7 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .hyperlink-element {
+#_sample_helper_static_id_prefix_7 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx7 .legend-title {
+#_sample_helper_static_id_prefix_7 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .legend-item {
+#_sample_helper_static_id_prefix_7 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-x {
+#_sample_helper_static_id_prefix_7 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-x {
+#_sample_helper_static_id_prefix_7 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-y {
+#_sample_helper_static_id_prefix_7 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-y {
+#_sample_helper_static_id_prefix_7 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-text {
+#_sample_helper_static_id_prefix_9 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-title {
+#_sample_helper_static_id_prefix_9 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-label {
+#_sample_helper_static_id_prefix_9 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1330,7 +1330,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx7">
+    <g id="_sample_helper_static_id_prefix_7">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1433,7 +1433,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1679,7 +1679,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx8">
+            <clipPath id="_sample_helper_static_id_prefix_8">
               <rect x="21.961210910936405" y="0.0" width="393.0387890890636" height="197.99999999999994">
               </rect>
             </clipPath>
@@ -1706,7 +1706,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx9">
+    <g id="_sample_helper_static_id_prefix_9">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="452.0" y="269.99999999999994">
@@ -1721,117 +1721,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx10 .plot-title {
+#_sample_helper_static_id_prefix_10 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx10 .plot-subtitle {
+#_sample_helper_static_id_prefix_10 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .plot-caption {
+#_sample_helper_static_id_prefix_10 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .hyperlink-element {
+#_sample_helper_static_id_prefix_10 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx10 .legend-title {
+#_sample_helper_static_id_prefix_10 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .legend-item {
+#_sample_helper_static_id_prefix_10 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-title-x {
+#_sample_helper_static_id_prefix_10 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .axis-text-x {
+#_sample_helper_static_id_prefix_10 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-title-y {
+#_sample_helper_static_id_prefix_10 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .axis-text-y {
+#_sample_helper_static_id_prefix_10 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_10 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_10 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-text {
+#_sample_helper_static_id_prefix_12 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-title {
+#_sample_helper_static_id_prefix_12 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-label {
+#_sample_helper_static_id_prefix_12 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1840,7 +1840,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx10">
+    <g id="_sample_helper_static_id_prefix_10">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1977,7 +1977,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -2223,7 +2223,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx11">
+            <clipPath id="_sample_helper_static_id_prefix_11">
               <rect x="21.961210910936405" y="0.0" width="393.0387890890636" height="197.99999999999994">
               </rect>
             </clipPath>
@@ -2252,7 +2252,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx12">
+    <g id="_sample_helper_static_id_prefix_12">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="6.0" y="533.9999999999999">
@@ -2267,117 +2267,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx13 .plot-title {
+#_sample_helper_static_id_prefix_13 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx13 .plot-subtitle {
+#_sample_helper_static_id_prefix_13 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .plot-caption {
+#_sample_helper_static_id_prefix_13 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .hyperlink-element {
+#_sample_helper_static_id_prefix_13 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx13 .legend-title {
+#_sample_helper_static_id_prefix_13 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .legend-item {
+#_sample_helper_static_id_prefix_13 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .axis-title-x {
+#_sample_helper_static_id_prefix_13 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .axis-text-x {
+#_sample_helper_static_id_prefix_13 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_15 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .axis-title-y {
+#_sample_helper_static_id_prefix_13 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .axis-text-y {
+#_sample_helper_static_id_prefix_13 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_15 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_13 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_13 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .tooltip-text {
+#_sample_helper_static_id_prefix_15 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .tooltip-title {
+#_sample_helper_static_id_prefix_15 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .tooltip-label {
+#_sample_helper_static_id_prefix_15 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -2386,7 +2386,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx13">
+    <g id="_sample_helper_static_id_prefix_13">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -2503,7 +2503,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 201.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 201.99999999999994)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -2749,7 +2749,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx14">
+            <clipPath id="_sample_helper_static_id_prefix_14">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="201.99999999999994">
               </rect>
             </clipPath>
@@ -2776,7 +2776,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx15">
+    <g id="_sample_helper_static_id_prefix_15">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="452.0" y="533.9999999999999">
@@ -2791,117 +2791,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx16 .plot-title {
+#_sample_helper_static_id_prefix_16 .plot-title {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx16 .plot-subtitle {
+#_sample_helper_static_id_prefix_16 .plot-subtitle {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx16 .plot-caption {
+#_sample_helper_static_id_prefix_16 .plot-caption {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .hyperlink-element {
+#_sample_helper_static_id_prefix_16 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx16 .legend-title {
+#_sample_helper_static_id_prefix_16 .legend-title {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx16 .legend-item {
+#_sample_helper_static_id_prefix_16 .legend-item {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-title-x {
+#_sample_helper_static_id_prefix_16 .axis-title-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx16 .axis-text-x {
+#_sample_helper_static_id_prefix_16 .axis-text-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_18 .axis-tooltip-text-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-title-y {
+#_sample_helper_static_id_prefix_16 .axis-title-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx16 .axis-text-y {
+#_sample_helper_static_id_prefix_16 .axis-text-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_18 .axis-tooltip-text-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_16 .facet-strip-text-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_16 .facet-strip-text-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .tooltip-text {
+#_sample_helper_static_id_prefix_18 .tooltip-text {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .tooltip-title {
+#_sample_helper_static_id_prefix_18 .tooltip-title {
 fill: #0000ff;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .tooltip-label {
+#_sample_helper_static_id_prefix_18 .tooltip-label {
 fill: #0000ff;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -2910,7 +2910,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx16">
+    <g id="_sample_helper_static_id_prefix_16">
       <path fill-rule="evenodd" fill="rgb(173,216,230)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -3051,7 +3051,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx17)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_17)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -3297,7 +3297,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx17">
+            <clipPath id="_sample_helper_static_id_prefix_17">
               <rect x="21.961210910936405" y="0.0" width="393.0387890890636" height="197.99999999999994">
               </rect>
             </clipPath>
@@ -3326,7 +3326,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(0,0,255)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx18">
+    <g id="_sample_helper_static_id_prefix_18">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesAllPrepStyles_dark.svg b/docs/images/guides/layout/guideStylesAllPrepStyles_dark.svg
index 5ff1229c2..09fc02249 100644
--- a/docs/images/guides/layout/guideStylesAllPrepStyles_dark.svg
+++ b/docs/images/guides/layout/guideStylesAllPrepStyles_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="799.9999999999999" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -377,7 +377,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 197.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 197.99999999999994)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -623,7 +623,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="197.99999999999994">
               </rect>
             </clipPath>
@@ -650,7 +650,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="452.0" y="6.0">
@@ -665,117 +665,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -784,7 +784,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -921,7 +921,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1167,7 +1167,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="21.961210910936405" y="0.0" width="393.0387890890636" height="197.99999999999994">
               </rect>
             </clipPath>
@@ -1196,7 +1196,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="6.0" y="269.99999999999994">
@@ -1211,117 +1211,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx7 .plot-title {
+#_sample_helper_static_id_prefix_7 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx7 .plot-subtitle {
+#_sample_helper_static_id_prefix_7 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .plot-caption {
+#_sample_helper_static_id_prefix_7 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .hyperlink-element {
+#_sample_helper_static_id_prefix_7 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx7 .legend-title {
+#_sample_helper_static_id_prefix_7 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .legend-item {
+#_sample_helper_static_id_prefix_7 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-x {
+#_sample_helper_static_id_prefix_7 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-x {
+#_sample_helper_static_id_prefix_7 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-y {
+#_sample_helper_static_id_prefix_7 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-y {
+#_sample_helper_static_id_prefix_7 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-text {
+#_sample_helper_static_id_prefix_9 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-title {
+#_sample_helper_static_id_prefix_9 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-label {
+#_sample_helper_static_id_prefix_9 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1330,7 +1330,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx7">
+    <g id="_sample_helper_static_id_prefix_7">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1433,7 +1433,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1679,7 +1679,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx8">
+            <clipPath id="_sample_helper_static_id_prefix_8">
               <rect x="21.961210910936405" y="0.0" width="393.0387890890636" height="197.99999999999994">
               </rect>
             </clipPath>
@@ -1706,7 +1706,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx9">
+    <g id="_sample_helper_static_id_prefix_9">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="452.0" y="269.99999999999994">
@@ -1721,117 +1721,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx10 .plot-title {
+#_sample_helper_static_id_prefix_10 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx10 .plot-subtitle {
+#_sample_helper_static_id_prefix_10 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .plot-caption {
+#_sample_helper_static_id_prefix_10 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .hyperlink-element {
+#_sample_helper_static_id_prefix_10 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx10 .legend-title {
+#_sample_helper_static_id_prefix_10 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .legend-item {
+#_sample_helper_static_id_prefix_10 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-title-x {
+#_sample_helper_static_id_prefix_10 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .axis-text-x {
+#_sample_helper_static_id_prefix_10 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-title-y {
+#_sample_helper_static_id_prefix_10 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .axis-text-y {
+#_sample_helper_static_id_prefix_10 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_10 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_10 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-text {
+#_sample_helper_static_id_prefix_12 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-title {
+#_sample_helper_static_id_prefix_12 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-label {
+#_sample_helper_static_id_prefix_12 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1840,7 +1840,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx10">
+    <g id="_sample_helper_static_id_prefix_10">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1977,7 +1977,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -2223,7 +2223,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx11">
+            <clipPath id="_sample_helper_static_id_prefix_11">
               <rect x="21.961210910936405" y="0.0" width="393.0387890890636" height="197.99999999999994">
               </rect>
             </clipPath>
@@ -2252,7 +2252,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx12">
+    <g id="_sample_helper_static_id_prefix_12">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="6.0" y="533.9999999999999">
@@ -2267,117 +2267,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx13 .plot-title {
+#_sample_helper_static_id_prefix_13 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx13 .plot-subtitle {
+#_sample_helper_static_id_prefix_13 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .plot-caption {
+#_sample_helper_static_id_prefix_13 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .hyperlink-element {
+#_sample_helper_static_id_prefix_13 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx13 .legend-title {
+#_sample_helper_static_id_prefix_13 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .legend-item {
+#_sample_helper_static_id_prefix_13 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .axis-title-x {
+#_sample_helper_static_id_prefix_13 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .axis-text-x {
+#_sample_helper_static_id_prefix_13 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_15 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .axis-title-y {
+#_sample_helper_static_id_prefix_13 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .axis-text-y {
+#_sample_helper_static_id_prefix_13 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_15 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_13 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_13 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .tooltip-text {
+#_sample_helper_static_id_prefix_15 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .tooltip-title {
+#_sample_helper_static_id_prefix_15 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .tooltip-label {
+#_sample_helper_static_id_prefix_15 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -2386,7 +2386,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx13">
+    <g id="_sample_helper_static_id_prefix_13">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -2503,7 +2503,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 201.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 201.99999999999994)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -2749,7 +2749,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx14">
+            <clipPath id="_sample_helper_static_id_prefix_14">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="201.99999999999994">
               </rect>
             </clipPath>
@@ -2776,7 +2776,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx15">
+    <g id="_sample_helper_static_id_prefix_15">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="452.0" y="533.9999999999999">
@@ -2791,117 +2791,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx16 .plot-title {
+#_sample_helper_static_id_prefix_16 .plot-title {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx16 .plot-subtitle {
+#_sample_helper_static_id_prefix_16 .plot-subtitle {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx16 .plot-caption {
+#_sample_helper_static_id_prefix_16 .plot-caption {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .hyperlink-element {
+#_sample_helper_static_id_prefix_16 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx16 .legend-title {
+#_sample_helper_static_id_prefix_16 .legend-title {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx16 .legend-item {
+#_sample_helper_static_id_prefix_16 .legend-item {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-title-x {
+#_sample_helper_static_id_prefix_16 .axis-title-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx16 .axis-text-x {
+#_sample_helper_static_id_prefix_16 .axis-text-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_18 .axis-tooltip-text-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-title-y {
+#_sample_helper_static_id_prefix_16 .axis-title-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx16 .axis-text-y {
+#_sample_helper_static_id_prefix_16 .axis-text-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_18 .axis-tooltip-text-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_16 .facet-strip-text-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_16 .facet-strip-text-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .tooltip-text {
+#_sample_helper_static_id_prefix_18 .tooltip-text {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .tooltip-title {
+#_sample_helper_static_id_prefix_18 .tooltip-title {
 fill: #0000ff;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .tooltip-label {
+#_sample_helper_static_id_prefix_18 .tooltip-label {
 fill: #0000ff;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -2910,7 +2910,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx16">
+    <g id="_sample_helper_static_id_prefix_16">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -3051,7 +3051,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx17)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_17)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -3297,7 +3297,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx17">
+            <clipPath id="_sample_helper_static_id_prefix_17">
               <rect x="21.961210910936405" y="0.0" width="393.0387890890636" height="197.99999999999994">
               </rect>
             </clipPath>
@@ -3326,7 +3326,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(0,0,255)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx18">
+    <g id="_sample_helper_static_id_prefix_18">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesAxisTooltip.svg b/docs/images/guides/layout/guideStylesAxisTooltip.svg
index d800421f9..c1cec8d25 100644
--- a/docs/images/guides/layout/guideStylesAxisTooltip.svg
+++ b/docs/images/guides/layout/guideStylesAxisTooltip.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="400.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -413,7 +413,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -659,7 +659,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="326.0">
               </rect>
             </clipPath>
@@ -686,7 +686,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="388.0" x="452.0" y="6.0">
@@ -701,117 +701,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #2c7fb8;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -820,7 +820,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -969,7 +969,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1215,7 +1215,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="326.0">
               </rect>
             </clipPath>
@@ -1242,7 +1242,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesAxisTooltip_dark.svg b/docs/images/guides/layout/guideStylesAxisTooltip_dark.svg
index 0159419b5..a74a267b2 100644
--- a/docs/images/guides/layout/guideStylesAxisTooltip_dark.svg
+++ b/docs/images/guides/layout/guideStylesAxisTooltip_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="400.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -413,7 +413,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -659,7 +659,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="326.0">
               </rect>
             </clipPath>
@@ -686,7 +686,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="388.0" x="452.0" y="6.0">
@@ -701,117 +701,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #2c7fb8;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -820,7 +820,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -969,7 +969,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1215,7 +1215,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="326.0">
               </rect>
             </clipPath>
@@ -1242,7 +1242,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesBackgroundPanel.svg b/docs/images/guides/layout/guideStylesBackgroundPanel.svg
index cfebbeba1..07d15d687 100644
--- a/docs/images/guides/layout/guideStylesBackgroundPanel.svg
+++ b/docs/images/guides/layout/guideStylesBackgroundPanel.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="400.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -413,7 +413,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -659,7 +659,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="326.0">
               </rect>
             </clipPath>
@@ -686,7 +686,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="388.0" x="452.0" y="6.0">
@@ -701,117 +701,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -820,7 +820,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -971,7 +971,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1217,7 +1217,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="326.0">
               </rect>
             </clipPath>
@@ -1246,7 +1246,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesBackgroundPanel_dark.svg b/docs/images/guides/layout/guideStylesBackgroundPanel_dark.svg
index 84eeea6ee..e80688349 100644
--- a/docs/images/guides/layout/guideStylesBackgroundPanel_dark.svg
+++ b/docs/images/guides/layout/guideStylesBackgroundPanel_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="400.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -413,7 +413,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -659,7 +659,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="326.0">
               </rect>
             </clipPath>
@@ -686,7 +686,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="388.0" x="452.0" y="6.0">
@@ -701,117 +701,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -820,7 +820,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -971,7 +971,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1217,7 +1217,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="326.0">
               </rect>
             </clipPath>
@@ -1246,7 +1246,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesBarPlotWithoutStyle.svg b/docs/images/guides/layout/guideStylesBarPlotWithoutStyle.svg
index 45e149214..8f57beef4 100644
--- a/docs/images/guides/layout/guideStylesBarPlotWithoutStyle.svg
+++ b/docs/images/guides/layout/guideStylesBarPlotWithoutStyle.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (607.0872754503931, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (607.0872754503931, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -189,7 +189,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="607.0872754503931" height="424.0">
             </rect>
           </clipPath>
@@ -413,6 +413,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesBarPlotWithoutStyle_dark.svg b/docs/images/guides/layout/guideStylesBarPlotWithoutStyle_dark.svg
index 8affbe1c8..4cc4a7dd4 100644
--- a/docs/images/guides/layout/guideStylesBarPlotWithoutStyle_dark.svg
+++ b/docs/images/guides/layout/guideStylesBarPlotWithoutStyle_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -285,7 +285,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (607.0872754503931, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (607.0872754503931, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -303,7 +303,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="607.0872754503931" height="424.0">
             </rect>
           </clipPath>
@@ -413,6 +413,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesBarsFacetGridX.svg b/docs/images/guides/layout/guideStylesBarsFacetGridX.svg
index f4f0b6a26..5d53c1752 100644
--- a/docs/images/guides/layout/guideStylesBarsFacetGridX.svg
+++ b/docs/images/guides/layout/guideStylesBarsFacetGridX.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (302.53394045293066, 405.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (302.53394045293066, 405.0)]">
         <g transform="translate(17.961210910936405 19.0 ) ">
           <g>
             <g>
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="19.0" width="302.53394045293066" height="405.0">
             </rect>
           </clipPath>
@@ -363,7 +363,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (330.4951513638671, 19.0), (302.53394045293066, 405.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (330.4951513638671, 19.0), (302.53394045293066, 405.0)]">
         <g transform="translate(330.4951513638671 19.0 ) ">
           <g>
             <g>
@@ -381,7 +381,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="330.4951513638671" y="19.0" width="302.53394045293066" height="405.0">
             </rect>
           </clipPath>
@@ -547,6 +547,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesBarsFacetGridX_dark.svg b/docs/images/guides/layout/guideStylesBarsFacetGridX_dark.svg
index 6ed8dda25..a864c84fd 100644
--- a/docs/images/guides/layout/guideStylesBarsFacetGridX_dark.svg
+++ b/docs/images/guides/layout/guideStylesBarsFacetGridX_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -294,7 +294,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (302.53394045293066, 405.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (302.53394045293066, 405.0)]">
         <g transform="translate(17.961210910936405 19.0 ) ">
           <g>
             <g>
@@ -308,7 +308,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="19.0" width="302.53394045293066" height="405.0">
             </rect>
           </clipPath>
@@ -414,7 +414,7 @@ font-size: 13.0px;
         <g transform="translate(330.4951513638671 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (330.4951513638671, 19.0), (302.53394045293066, 405.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (330.4951513638671, 19.0), (302.53394045293066, 405.0)]">
         <g transform="translate(330.4951513638671 19.0 ) ">
           <g>
             <g>
@@ -432,7 +432,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="330.4951513638671" y="19.0" width="302.53394045293066" height="405.0">
             </rect>
           </clipPath>
@@ -547,6 +547,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesBlankAxis.svg b/docs/images/guides/layout/guideStylesBlankAxis.svg
index 79bb3baa7..1292f35e9 100644
--- a/docs/images/guides/layout/guideStylesBlankAxis.svg
+++ b/docs/images/guides/layout/guideStylesBlankAxis.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="400.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -413,7 +413,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -659,7 +659,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="326.0">
               </rect>
             </clipPath>
@@ -686,7 +686,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="388.0" x="452.0" y="6.0">
@@ -701,117 +701,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -820,7 +820,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -967,7 +967,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1213,7 +1213,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="326.0">
               </rect>
             </clipPath>
@@ -1240,7 +1240,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesBlankAxis_dark.svg b/docs/images/guides/layout/guideStylesBlankAxis_dark.svg
index 09b9f4463..123d167ac 100644
--- a/docs/images/guides/layout/guideStylesBlankAxis_dark.svg
+++ b/docs/images/guides/layout/guideStylesBlankAxis_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="400.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -413,7 +413,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -659,7 +659,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="326.0">
               </rect>
             </clipPath>
@@ -686,7 +686,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="388.0" x="452.0" y="6.0">
@@ -701,117 +701,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -820,7 +820,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -967,7 +967,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1213,7 +1213,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="326.0">
               </rect>
             </clipPath>
@@ -1240,7 +1240,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesConfigureBackgroundGrid.svg b/docs/images/guides/layout/guideStylesConfigureBackgroundGrid.svg
index 65f82f074..3bafb1b1e 100644
--- a/docs/images/guides/layout/guideStylesConfigureBackgroundGrid.svg
+++ b/docs/images/guides/layout/guideStylesConfigureBackgroundGrid.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="400.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #0000ff;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #0000ff;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(173,216,230)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -470,7 +470,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (340.08727545039307, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (340.08727545039307, 326.0)]">
           <g transform="translate(29.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -488,7 +488,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="29.941816366404606" y="0.0" width="340.08727545039307" height="326.0">
               </rect>
             </clipPath>
@@ -615,7 +615,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(0,0,255)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="388.0" x="452.0" y="6.0">
@@ -630,117 +630,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #0000ff;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #0000ff;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -749,7 +749,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(237,248,177)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -955,7 +955,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (340.08727545039307, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (340.08727545039307, 326.0)]">
           <g transform="translate(29.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -973,7 +973,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="29.941816366404606" y="0.0" width="340.08727545039307" height="326.0">
               </rect>
             </clipPath>
@@ -1100,7 +1100,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(44,127,184)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesConfigureBackgroundGrid_dark.svg b/docs/images/guides/layout/guideStylesConfigureBackgroundGrid_dark.svg
index 32610a3b7..3e3084021 100644
--- a/docs/images/guides/layout/guideStylesConfigureBackgroundGrid_dark.svg
+++ b/docs/images/guides/layout/guideStylesConfigureBackgroundGrid_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="400.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #0000ff;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #0000ff;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -470,7 +470,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (340.08727545039307, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (340.08727545039307, 326.0)]">
           <g transform="translate(29.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -488,7 +488,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="29.941816366404606" y="0.0" width="340.08727545039307" height="326.0">
               </rect>
             </clipPath>
@@ -615,7 +615,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(0,0,255)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="388.0" x="452.0" y="6.0">
@@ -630,117 +630,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #0000ff;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #0000ff;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -749,7 +749,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -955,7 +955,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (340.08727545039307, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (340.08727545039307, 326.0)]">
           <g transform="translate(29.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -973,7 +973,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="29.941816366404606" y="0.0" width="340.08727545039307" height="326.0">
               </rect>
             </clipPath>
@@ -1100,7 +1100,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(44,127,184)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesConfigureGridLine.svg b/docs/images/guides/layout/guideStylesConfigureGridLine.svg
index 8e615b848..f714051ec 100644
--- a/docs/images/guides/layout/guideStylesConfigureGridLine.svg
+++ b/docs/images/guides/layout/guideStylesConfigureGridLine.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="400.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -413,7 +413,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -659,7 +659,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="326.0">
               </rect>
             </clipPath>
@@ -686,7 +686,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="388.0" x="452.0" y="6.0">
@@ -701,117 +701,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -820,7 +820,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -969,7 +969,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1215,7 +1215,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="326.0">
               </rect>
             </clipPath>
@@ -1242,7 +1242,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesConfigureGridLine_dark.svg b/docs/images/guides/layout/guideStylesConfigureGridLine_dark.svg
index 220c91e43..c5e4f38d0 100644
--- a/docs/images/guides/layout/guideStylesConfigureGridLine_dark.svg
+++ b/docs/images/guides/layout/guideStylesConfigureGridLine_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="400.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -413,7 +413,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -659,7 +659,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="326.0">
               </rect>
             </clipPath>
@@ -686,7 +686,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="388.0" x="452.0" y="6.0">
@@ -701,117 +701,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -820,7 +820,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -969,7 +969,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1215,7 +1215,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="326.0">
               </rect>
             </clipPath>
@@ -1242,7 +1242,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesCoordFlip.svg b/docs/images/guides/layout/guideStylesCoordFlip.svg
index f45acf703..0677ada78 100644
--- a/docs/images/guides/layout/guideStylesCoordFlip.svg
+++ b/docs/images/guides/layout/guideStylesCoordFlip.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="799.9999999999999" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -298,7 +298,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (356.0484863613295, 201.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (356.0484863613295, 201.99999999999994)]">
           <g transform="translate(13.980605455468202 0.0 ) ">
             <g>
               <g>
@@ -322,7 +322,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="13.980605455468202" y="0.0" width="356.0484863613295" height="201.99999999999994">
               </rect>
             </clipPath>
@@ -523,7 +523,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="452.0" y="6.0">
@@ -538,117 +538,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #31a354;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #31a354;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -657,7 +657,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -777,7 +777,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (356.0484863613295, 201.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (356.0484863613295, 201.99999999999994)]">
           <g transform="translate(13.980605455468202 0.0 ) ">
             <g>
               <g>
@@ -801,7 +801,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="13.980605455468202" y="0.0" width="356.0484863613295" height="201.99999999999994">
               </rect>
             </clipPath>
@@ -916,7 +916,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="6.0" y="269.99999999999994">
@@ -931,117 +931,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx7 .plot-title {
+#_sample_helper_static_id_prefix_7 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx7 .plot-subtitle {
+#_sample_helper_static_id_prefix_7 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .plot-caption {
+#_sample_helper_static_id_prefix_7 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .hyperlink-element {
+#_sample_helper_static_id_prefix_7 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx7 .legend-title {
+#_sample_helper_static_id_prefix_7 .legend-title {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .legend-item {
+#_sample_helper_static_id_prefix_7 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-y {
+#_sample_helper_static_id_prefix_7 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-y {
+#_sample_helper_static_id_prefix_7 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-x {
+#_sample_helper_static_id_prefix_7 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-x {
+#_sample_helper_static_id_prefix_7 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-text {
+#_sample_helper_static_id_prefix_9 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-title {
+#_sample_helper_static_id_prefix_9 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-label {
+#_sample_helper_static_id_prefix_9 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1050,7 +1050,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx7">
+    <g id="_sample_helper_static_id_prefix_7">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1170,7 +1170,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (356.0484863613295, 201.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (356.0484863613295, 201.99999999999994)]">
           <g transform="translate(13.980605455468202 0.0 ) ">
             <g>
               <g>
@@ -1194,7 +1194,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx8">
+            <clipPath id="_sample_helper_static_id_prefix_8">
               <rect x="13.980605455468202" y="0.0" width="356.0484863613295" height="201.99999999999994">
               </rect>
             </clipPath>
@@ -1309,7 +1309,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx9">
+    <g id="_sample_helper_static_id_prefix_9">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="452.0" y="269.99999999999994">
@@ -1324,117 +1324,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx10 .plot-title {
+#_sample_helper_static_id_prefix_10 .plot-title {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx10 .plot-subtitle {
+#_sample_helper_static_id_prefix_10 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .plot-caption {
+#_sample_helper_static_id_prefix_10 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .hyperlink-element {
+#_sample_helper_static_id_prefix_10 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx10 .legend-title {
+#_sample_helper_static_id_prefix_10 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .legend-item {
+#_sample_helper_static_id_prefix_10 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-title-y {
+#_sample_helper_static_id_prefix_10 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .axis-text-y {
+#_sample_helper_static_id_prefix_10 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-title-x {
+#_sample_helper_static_id_prefix_10 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .axis-text-x {
+#_sample_helper_static_id_prefix_10 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_10 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_10 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-text {
+#_sample_helper_static_id_prefix_12 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-title {
+#_sample_helper_static_id_prefix_12 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-label {
+#_sample_helper_static_id_prefix_12 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1443,7 +1443,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx10">
+    <g id="_sample_helper_static_id_prefix_10">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1563,7 +1563,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (356.0484863613295, 201.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (356.0484863613295, 201.99999999999994)]">
           <g transform="translate(13.980605455468202 0.0 ) ">
             <g>
               <g>
@@ -1587,7 +1587,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx11">
+            <clipPath id="_sample_helper_static_id_prefix_11">
               <rect x="13.980605455468202" y="0.0" width="356.0484863613295" height="201.99999999999994">
               </rect>
             </clipPath>
@@ -1714,7 +1714,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx12">
+    <g id="_sample_helper_static_id_prefix_12">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="6.0" y="533.9999999999999">
@@ -1729,117 +1729,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx13 .plot-title {
+#_sample_helper_static_id_prefix_13 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx13 .plot-subtitle {
+#_sample_helper_static_id_prefix_13 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .plot-caption {
+#_sample_helper_static_id_prefix_13 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .hyperlink-element {
+#_sample_helper_static_id_prefix_13 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx13 .legend-title {
+#_sample_helper_static_id_prefix_13 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .legend-item {
+#_sample_helper_static_id_prefix_13 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .axis-title-y {
+#_sample_helper_static_id_prefix_13 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .axis-text-y {
+#_sample_helper_static_id_prefix_13 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_15 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .axis-title-x {
+#_sample_helper_static_id_prefix_13 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .axis-text-x {
+#_sample_helper_static_id_prefix_13 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_15 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_13 .facet-strip-text-x {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_13 .facet-strip-text-y {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .tooltip-text {
+#_sample_helper_static_id_prefix_15 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .tooltip-title {
+#_sample_helper_static_id_prefix_15 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .tooltip-label {
+#_sample_helper_static_id_prefix_15 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1848,7 +1848,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx13">
+    <g id="_sample_helper_static_id_prefix_13">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1968,7 +1968,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (356.0484863613295, 201.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (356.0484863613295, 201.99999999999994)]">
           <g transform="translate(13.980605455468202 0.0 ) ">
             <g>
               <g>
@@ -1992,7 +1992,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx14">
+            <clipPath id="_sample_helper_static_id_prefix_14">
               <rect x="13.980605455468202" y="0.0" width="356.0484863613295" height="201.99999999999994">
               </rect>
             </clipPath>
@@ -2107,7 +2107,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx15">
+    <g id="_sample_helper_static_id_prefix_15">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="452.0" y="533.9999999999999">
@@ -2122,117 +2122,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx16 .plot-title {
+#_sample_helper_static_id_prefix_16 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx16 .plot-subtitle {
+#_sample_helper_static_id_prefix_16 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx16 .plot-caption {
+#_sample_helper_static_id_prefix_16 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .hyperlink-element {
+#_sample_helper_static_id_prefix_16 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx16 .legend-title {
+#_sample_helper_static_id_prefix_16 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx16 .legend-item {
+#_sample_helper_static_id_prefix_16 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-title-y {
+#_sample_helper_static_id_prefix_16 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx16 .axis-text-y {
+#_sample_helper_static_id_prefix_16 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_18 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-title-x {
+#_sample_helper_static_id_prefix_16 .axis-title-x {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx16 .axis-text-x {
+#_sample_helper_static_id_prefix_16 .axis-text-x {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_18 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_16 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_16 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .tooltip-text {
+#_sample_helper_static_id_prefix_18 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .tooltip-title {
+#_sample_helper_static_id_prefix_18 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .tooltip-label {
+#_sample_helper_static_id_prefix_18 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -2241,7 +2241,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx16">
+    <g id="_sample_helper_static_id_prefix_16">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -2361,7 +2361,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx17)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (356.0484863613295, 201.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_17)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (356.0484863613295, 201.99999999999994)]">
           <g transform="translate(13.980605455468202 0.0 ) ">
             <g>
               <g>
@@ -2385,7 +2385,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx17">
+            <clipPath id="_sample_helper_static_id_prefix_17">
               <rect x="13.980605455468202" y="0.0" width="356.0484863613295" height="201.99999999999994">
               </rect>
             </clipPath>
@@ -2500,7 +2500,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx18">
+    <g id="_sample_helper_static_id_prefix_18">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesCoordFlip_dark.svg b/docs/images/guides/layout/guideStylesCoordFlip_dark.svg
index 8b9f7d751..49da2e488 100644
--- a/docs/images/guides/layout/guideStylesCoordFlip_dark.svg
+++ b/docs/images/guides/layout/guideStylesCoordFlip_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="799.9999999999999" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -384,7 +384,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (356.0484863613295, 201.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (356.0484863613295, 201.99999999999994)]">
           <g transform="translate(13.980605455468202 0.0 ) ">
             <g>
               <g>
@@ -408,7 +408,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="13.980605455468202" y="0.0" width="356.0484863613295" height="201.99999999999994">
               </rect>
             </clipPath>
@@ -523,7 +523,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="452.0" y="6.0">
@@ -538,117 +538,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #31a354;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #31a354;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -657,7 +657,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -777,7 +777,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (356.0484863613295, 201.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (356.0484863613295, 201.99999999999994)]">
           <g transform="translate(13.980605455468202 0.0 ) ">
             <g>
               <g>
@@ -801,7 +801,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="13.980605455468202" y="0.0" width="356.0484863613295" height="201.99999999999994">
               </rect>
             </clipPath>
@@ -916,7 +916,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="6.0" y="269.99999999999994">
@@ -931,117 +931,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx7 .plot-title {
+#_sample_helper_static_id_prefix_7 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx7 .plot-subtitle {
+#_sample_helper_static_id_prefix_7 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .plot-caption {
+#_sample_helper_static_id_prefix_7 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .hyperlink-element {
+#_sample_helper_static_id_prefix_7 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx7 .legend-title {
+#_sample_helper_static_id_prefix_7 .legend-title {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .legend-item {
+#_sample_helper_static_id_prefix_7 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-y {
+#_sample_helper_static_id_prefix_7 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-y {
+#_sample_helper_static_id_prefix_7 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-x {
+#_sample_helper_static_id_prefix_7 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-x {
+#_sample_helper_static_id_prefix_7 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-text {
+#_sample_helper_static_id_prefix_9 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-title {
+#_sample_helper_static_id_prefix_9 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-label {
+#_sample_helper_static_id_prefix_9 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1050,7 +1050,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx7">
+    <g id="_sample_helper_static_id_prefix_7">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1170,7 +1170,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (356.0484863613295, 201.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (356.0484863613295, 201.99999999999994)]">
           <g transform="translate(13.980605455468202 0.0 ) ">
             <g>
               <g>
@@ -1194,7 +1194,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx8">
+            <clipPath id="_sample_helper_static_id_prefix_8">
               <rect x="13.980605455468202" y="0.0" width="356.0484863613295" height="201.99999999999994">
               </rect>
             </clipPath>
@@ -1309,7 +1309,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx9">
+    <g id="_sample_helper_static_id_prefix_9">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="452.0" y="269.99999999999994">
@@ -1324,117 +1324,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx10 .plot-title {
+#_sample_helper_static_id_prefix_10 .plot-title {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx10 .plot-subtitle {
+#_sample_helper_static_id_prefix_10 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .plot-caption {
+#_sample_helper_static_id_prefix_10 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .hyperlink-element {
+#_sample_helper_static_id_prefix_10 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx10 .legend-title {
+#_sample_helper_static_id_prefix_10 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .legend-item {
+#_sample_helper_static_id_prefix_10 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-title-y {
+#_sample_helper_static_id_prefix_10 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .axis-text-y {
+#_sample_helper_static_id_prefix_10 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-title-x {
+#_sample_helper_static_id_prefix_10 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .axis-text-x {
+#_sample_helper_static_id_prefix_10 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_10 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_10 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-text {
+#_sample_helper_static_id_prefix_12 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-title {
+#_sample_helper_static_id_prefix_12 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-label {
+#_sample_helper_static_id_prefix_12 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1443,7 +1443,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx10">
+    <g id="_sample_helper_static_id_prefix_10">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1563,7 +1563,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (356.0484863613295, 201.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (356.0484863613295, 201.99999999999994)]">
           <g transform="translate(13.980605455468202 0.0 ) ">
             <g>
               <g>
@@ -1587,7 +1587,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx11">
+            <clipPath id="_sample_helper_static_id_prefix_11">
               <rect x="13.980605455468202" y="0.0" width="356.0484863613295" height="201.99999999999994">
               </rect>
             </clipPath>
@@ -1714,7 +1714,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx12">
+    <g id="_sample_helper_static_id_prefix_12">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="6.0" y="533.9999999999999">
@@ -1729,117 +1729,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx13 .plot-title {
+#_sample_helper_static_id_prefix_13 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx13 .plot-subtitle {
+#_sample_helper_static_id_prefix_13 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .plot-caption {
+#_sample_helper_static_id_prefix_13 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .hyperlink-element {
+#_sample_helper_static_id_prefix_13 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx13 .legend-title {
+#_sample_helper_static_id_prefix_13 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .legend-item {
+#_sample_helper_static_id_prefix_13 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .axis-title-y {
+#_sample_helper_static_id_prefix_13 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .axis-text-y {
+#_sample_helper_static_id_prefix_13 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_15 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .axis-title-x {
+#_sample_helper_static_id_prefix_13 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .axis-text-x {
+#_sample_helper_static_id_prefix_13 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_15 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_13 .facet-strip-text-x {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_13 .facet-strip-text-y {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .tooltip-text {
+#_sample_helper_static_id_prefix_15 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .tooltip-title {
+#_sample_helper_static_id_prefix_15 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .tooltip-label {
+#_sample_helper_static_id_prefix_15 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1848,7 +1848,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx13">
+    <g id="_sample_helper_static_id_prefix_13">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1968,7 +1968,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (356.0484863613295, 201.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (356.0484863613295, 201.99999999999994)]">
           <g transform="translate(13.980605455468202 0.0 ) ">
             <g>
               <g>
@@ -1992,7 +1992,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx14">
+            <clipPath id="_sample_helper_static_id_prefix_14">
               <rect x="13.980605455468202" y="0.0" width="356.0484863613295" height="201.99999999999994">
               </rect>
             </clipPath>
@@ -2107,7 +2107,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx15">
+    <g id="_sample_helper_static_id_prefix_15">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="452.0" y="533.9999999999999">
@@ -2122,117 +2122,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx16 .plot-title {
+#_sample_helper_static_id_prefix_16 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx16 .plot-subtitle {
+#_sample_helper_static_id_prefix_16 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx16 .plot-caption {
+#_sample_helper_static_id_prefix_16 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .hyperlink-element {
+#_sample_helper_static_id_prefix_16 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx16 .legend-title {
+#_sample_helper_static_id_prefix_16 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx16 .legend-item {
+#_sample_helper_static_id_prefix_16 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-title-y {
+#_sample_helper_static_id_prefix_16 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx16 .axis-text-y {
+#_sample_helper_static_id_prefix_16 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_18 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-title-x {
+#_sample_helper_static_id_prefix_16 .axis-title-x {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx16 .axis-text-x {
+#_sample_helper_static_id_prefix_16 .axis-text-x {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_18 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_16 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_16 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .tooltip-text {
+#_sample_helper_static_id_prefix_18 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .tooltip-title {
+#_sample_helper_static_id_prefix_18 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .tooltip-label {
+#_sample_helper_static_id_prefix_18 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -2241,7 +2241,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx16">
+    <g id="_sample_helper_static_id_prefix_16">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -2361,7 +2361,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx17)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (356.0484863613295, 201.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_17)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (356.0484863613295, 201.99999999999994)]">
           <g transform="translate(13.980605455468202 0.0 ) ">
             <g>
               <g>
@@ -2385,7 +2385,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx17">
+            <clipPath id="_sample_helper_static_id_prefix_17">
               <rect x="13.980605455468202" y="0.0" width="356.0484863613295" height="201.99999999999994">
               </rect>
             </clipPath>
@@ -2500,7 +2500,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx18">
+    <g id="_sample_helper_static_id_prefix_18">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesCustomStyleForLegend.svg b/docs/images/guides/layout/guideStylesCustomStyleForLegend.svg
index d833613eb..4f2f7de94 100644
--- a/docs/images/guides/layout/guideStylesCustomStyleForLegend.svg
+++ b/docs/images/guides/layout/guideStylesCustomStyleForLegend.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -285,7 +285,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 408.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -303,7 +303,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="408.0">
             </rect>
           </clipPath>
@@ -418,6 +418,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesCustomStyleForLegend_dark.svg b/docs/images/guides/layout/guideStylesCustomStyleForLegend_dark.svg
index 6d7bcba5a..f32c9fdf2 100644
--- a/docs/images/guides/layout/guideStylesCustomStyleForLegend_dark.svg
+++ b/docs/images/guides/layout/guideStylesCustomStyleForLegend_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -285,7 +285,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 408.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -303,7 +303,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="408.0">
             </rect>
           </clipPath>
@@ -418,6 +418,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesOnTopXAxis.svg b/docs/images/guides/layout/guideStylesOnTopXAxis.svg
index 17741d273..1777dd989 100644
--- a/docs/images/guides/layout/guideStylesOnTopXAxis.svg
+++ b/docs/images/guides/layout/guideStylesOnTopXAxis.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="400.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -420,7 +420,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 326.0)]">
           <g transform="translate(25.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -438,7 +438,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="25.941816366404606" y="0.0" width="344.08727545039307" height="326.0">
               </rect>
             </clipPath>
@@ -553,7 +553,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="388.0" x="452.0" y="6.0">
@@ -568,117 +568,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -687,7 +687,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -794,7 +794,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 326.0)]">
           <g transform="translate(25.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -812,7 +812,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="25.941816366404606" y="0.0" width="344.08727545039307" height="326.0">
               </rect>
             </clipPath>
@@ -976,7 +976,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesOnTopXAxis_dark.svg b/docs/images/guides/layout/guideStylesOnTopXAxis_dark.svg
index 9d1dd70af..6d7f57783 100644
--- a/docs/images/guides/layout/guideStylesOnTopXAxis_dark.svg
+++ b/docs/images/guides/layout/guideStylesOnTopXAxis_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="400.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -420,7 +420,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 326.0)]">
           <g transform="translate(25.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -438,7 +438,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="25.941816366404606" y="0.0" width="344.08727545039307" height="326.0">
               </rect>
             </clipPath>
@@ -553,7 +553,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="388.0" x="452.0" y="6.0">
@@ -568,117 +568,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -687,7 +687,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -794,7 +794,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 326.0)]">
           <g transform="translate(25.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -812,7 +812,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="25.941816366404606" y="0.0" width="344.08727545039307" height="326.0">
               </rect>
             </clipPath>
@@ -976,7 +976,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesOrangeCustomStyle.svg b/docs/images/guides/layout/guideStylesOrangeCustomStyle.svg
index b0e695178..f03c5bb40 100644
--- a/docs/images/guides/layout/guideStylesOrangeCustomStyle.svg
+++ b/docs/images/guides/layout/guideStylesOrangeCustomStyle.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="400.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #7f2704;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #7f2704;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,204)" fill-opacity="1.0" d="M0.5 0.5 L0.5 387.5 L441.5 387.5 L441.5 0.5 Z">
       </path>
       <g transform="translate(22.0 23.0 ) ">
@@ -431,7 +431,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (24.961210910936405, 0.0), (388.0387890890636, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (24.961210910936405, 0.0), (388.0387890890636, 321.0)]">
           <g transform="translate(24.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -677,7 +677,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="24.961210910936405" y="0.0" width="388.0387890890636" height="321.0">
               </rect>
             </clipPath>
@@ -706,7 +706,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(241,105,19)" stroke-opacity="1.0" stroke-width="1.0" d="M0.5 0.5 L0.5 387.5 L441.5 387.5 L441.5 0.5 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="388.0" x="452.0" y="6.0">
@@ -721,117 +721,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #7f2704;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #7f2704;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -840,7 +840,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(255,255,204)" fill-opacity="1.0" d="M0.5 0.5 L0.5 387.5 L441.5 387.5 L441.5 0.5 Z">
       </path>
       <g transform="translate(22.0 23.0 ) ">
@@ -961,7 +961,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (32.94181636640461, 0.0), (380.0581836335954, 286.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (32.94181636640461, 0.0), (380.0581836335954, 286.0)]">
           <g transform="translate(32.94181636640461 0.0 ) ">
             <g>
               <g>
@@ -979,7 +979,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="32.94181636640461" y="0.0" width="380.0581836335954" height="286.0">
               </rect>
             </clipPath>
@@ -1106,7 +1106,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(241,105,19)" stroke-opacity="1.0" stroke-width="1.0" d="M0.5 0.5 L0.5 387.5 L441.5 387.5 L441.5 0.5 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesOrangeCustomStyle_dark.svg b/docs/images/guides/layout/guideStylesOrangeCustomStyle_dark.svg
index 193ff4a01..dc1f669d8 100644
--- a/docs/images/guides/layout/guideStylesOrangeCustomStyle_dark.svg
+++ b/docs/images/guides/layout/guideStylesOrangeCustomStyle_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="400.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #7f2704;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #7f2704;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,204)" fill-opacity="1.0" d="M0.5 0.5 L0.5 387.5 L441.5 387.5 L441.5 0.5 Z">
       </path>
       <g transform="translate(22.0 23.0 ) ">
@@ -431,7 +431,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (24.961210910936405, 0.0), (388.0387890890636, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (24.961210910936405, 0.0), (388.0387890890636, 321.0)]">
           <g transform="translate(24.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -677,7 +677,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="24.961210910936405" y="0.0" width="388.0387890890636" height="321.0">
               </rect>
             </clipPath>
@@ -706,7 +706,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(241,105,19)" stroke-opacity="1.0" stroke-width="1.0" d="M0.5 0.5 L0.5 387.5 L441.5 387.5 L441.5 0.5 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="388.0" x="452.0" y="6.0">
@@ -721,117 +721,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #7f2704;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #7f2704;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #7f2704;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -840,7 +840,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(255,255,204)" fill-opacity="1.0" d="M0.5 0.5 L0.5 387.5 L441.5 387.5 L441.5 0.5 Z">
       </path>
       <g transform="translate(22.0 23.0 ) ">
@@ -961,7 +961,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (32.94181636640461, 0.0), (380.0581836335954, 286.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (32.94181636640461, 0.0), (380.0581836335954, 286.0)]">
           <g transform="translate(32.94181636640461 0.0 ) ">
             <g>
               <g>
@@ -979,7 +979,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="32.94181636640461" y="0.0" width="380.0581836335954" height="286.0">
               </rect>
             </clipPath>
@@ -1106,7 +1106,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(241,105,19)" stroke-opacity="1.0" stroke-width="1.0" d="M0.5 0.5 L0.5 387.5 L441.5 387.5 L441.5 0.5 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesPanelGrid.svg b/docs/images/guides/layout/guideStylesPanelGrid.svg
index fe45a1696..b8451efbe 100644
--- a/docs/images/guides/layout/guideStylesPanelGrid.svg
+++ b/docs/images/guides/layout/guideStylesPanelGrid.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="600.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -357,7 +357,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 230.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 230.0)]">
           <g transform="translate(25.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -375,7 +375,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="25.941816366404606" y="0.0" width="344.08727545039307" height="230.0">
               </rect>
             </clipPath>
@@ -490,7 +490,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="452.0" y="6.0">
@@ -505,117 +505,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -624,7 +624,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -737,7 +737,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 230.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 230.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -983,7 +983,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="230.0">
               </rect>
             </clipPath>
@@ -1010,7 +1010,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="6.0" y="302.0">
@@ -1025,117 +1025,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx7 .plot-title {
+#_sample_helper_static_id_prefix_7 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx7 .plot-subtitle {
+#_sample_helper_static_id_prefix_7 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .plot-caption {
+#_sample_helper_static_id_prefix_7 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .hyperlink-element {
+#_sample_helper_static_id_prefix_7 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx7 .legend-title {
+#_sample_helper_static_id_prefix_7 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .legend-item {
+#_sample_helper_static_id_prefix_7 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-x {
+#_sample_helper_static_id_prefix_7 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-x {
+#_sample_helper_static_id_prefix_7 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-y {
+#_sample_helper_static_id_prefix_7 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-y {
+#_sample_helper_static_id_prefix_7 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-text {
+#_sample_helper_static_id_prefix_9 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-title {
+#_sample_helper_static_id_prefix_9 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-label {
+#_sample_helper_static_id_prefix_9 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1144,7 +1144,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx7">
+    <g id="_sample_helper_static_id_prefix_7">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 38.0 ) ">
@@ -1275,7 +1275,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 214.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 214.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1521,7 +1521,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx8">
+            <clipPath id="_sample_helper_static_id_prefix_8">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="214.0">
               </rect>
             </clipPath>
@@ -1551,7 +1551,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx9">
+    <g id="_sample_helper_static_id_prefix_9">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="452.0" y="302.0">
@@ -1566,117 +1566,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx10 .plot-title {
+#_sample_helper_static_id_prefix_10 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx10 .plot-subtitle {
+#_sample_helper_static_id_prefix_10 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .plot-caption {
+#_sample_helper_static_id_prefix_10 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .hyperlink-element {
+#_sample_helper_static_id_prefix_10 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx10 .legend-title {
+#_sample_helper_static_id_prefix_10 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .legend-item {
+#_sample_helper_static_id_prefix_10 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-title-x {
+#_sample_helper_static_id_prefix_10 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .axis-text-x {
+#_sample_helper_static_id_prefix_10 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-title-y {
+#_sample_helper_static_id_prefix_10 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .axis-text-y {
+#_sample_helper_static_id_prefix_10 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_10 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_10 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-text {
+#_sample_helper_static_id_prefix_12 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-title {
+#_sample_helper_static_id_prefix_12 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-label {
+#_sample_helper_static_id_prefix_12 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1685,7 +1685,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx10">
+    <g id="_sample_helper_static_id_prefix_10">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 54.0 ) ">
@@ -1794,7 +1794,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 198.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 198.0)]">
           <g transform="translate(25.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -1812,7 +1812,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx11">
+            <clipPath id="_sample_helper_static_id_prefix_11">
               <rect x="25.941816366404606" y="0.0" width="344.08727545039307" height="198.0">
               </rect>
             </clipPath>
@@ -1933,7 +1933,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx12">
+    <g id="_sample_helper_static_id_prefix_12">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesPanelGrid_dark.svg b/docs/images/guides/layout/guideStylesPanelGrid_dark.svg
index b548782e2..5c32f2c88 100644
--- a/docs/images/guides/layout/guideStylesPanelGrid_dark.svg
+++ b/docs/images/guides/layout/guideStylesPanelGrid_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="600.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -357,7 +357,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 230.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 230.0)]">
           <g transform="translate(25.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -375,7 +375,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="25.941816366404606" y="0.0" width="344.08727545039307" height="230.0">
               </rect>
             </clipPath>
@@ -490,7 +490,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="452.0" y="6.0">
@@ -505,117 +505,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -624,7 +624,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -737,7 +737,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 230.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 230.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -983,7 +983,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="230.0">
               </rect>
             </clipPath>
@@ -1010,7 +1010,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="6.0" y="302.0">
@@ -1025,117 +1025,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx7 .plot-title {
+#_sample_helper_static_id_prefix_7 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx7 .plot-subtitle {
+#_sample_helper_static_id_prefix_7 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .plot-caption {
+#_sample_helper_static_id_prefix_7 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .hyperlink-element {
+#_sample_helper_static_id_prefix_7 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx7 .legend-title {
+#_sample_helper_static_id_prefix_7 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .legend-item {
+#_sample_helper_static_id_prefix_7 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-x {
+#_sample_helper_static_id_prefix_7 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-x {
+#_sample_helper_static_id_prefix_7 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-y {
+#_sample_helper_static_id_prefix_7 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-y {
+#_sample_helper_static_id_prefix_7 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-text {
+#_sample_helper_static_id_prefix_9 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-title {
+#_sample_helper_static_id_prefix_9 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-label {
+#_sample_helper_static_id_prefix_9 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1144,7 +1144,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx7">
+    <g id="_sample_helper_static_id_prefix_7">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 38.0 ) ">
@@ -1275,7 +1275,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 214.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 214.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1521,7 +1521,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx8">
+            <clipPath id="_sample_helper_static_id_prefix_8">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="214.0">
               </rect>
             </clipPath>
@@ -1551,7 +1551,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx9">
+    <g id="_sample_helper_static_id_prefix_9">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="452.0" y="302.0">
@@ -1566,117 +1566,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx10 .plot-title {
+#_sample_helper_static_id_prefix_10 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx10 .plot-subtitle {
+#_sample_helper_static_id_prefix_10 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .plot-caption {
+#_sample_helper_static_id_prefix_10 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .hyperlink-element {
+#_sample_helper_static_id_prefix_10 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx10 .legend-title {
+#_sample_helper_static_id_prefix_10 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .legend-item {
+#_sample_helper_static_id_prefix_10 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-title-x {
+#_sample_helper_static_id_prefix_10 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .axis-text-x {
+#_sample_helper_static_id_prefix_10 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-title-y {
+#_sample_helper_static_id_prefix_10 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .axis-text-y {
+#_sample_helper_static_id_prefix_10 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_10 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_10 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-text {
+#_sample_helper_static_id_prefix_12 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-title {
+#_sample_helper_static_id_prefix_12 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-label {
+#_sample_helper_static_id_prefix_12 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1685,7 +1685,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx10">
+    <g id="_sample_helper_static_id_prefix_10">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 54.0 ) ">
@@ -1794,7 +1794,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 198.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 198.0)]">
           <g transform="translate(25.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -1812,7 +1812,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx11">
+            <clipPath id="_sample_helper_static_id_prefix_11">
               <rect x="25.941816366404606" y="0.0" width="344.08727545039307" height="198.0">
               </rect>
             </clipPath>
@@ -1933,7 +1933,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx12">
+    <g id="_sample_helper_static_id_prefix_12">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesPointPlotWithoutStyle.svg b/docs/images/guides/layout/guideStylesPointPlotWithoutStyle.svg
index 265e6044d..8fb68fd73 100644
--- a/docs/images/guides/layout/guideStylesPointPlotWithoutStyle.svg
+++ b/docs/images/guides/layout/guideStylesPointPlotWithoutStyle.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -415,7 +415,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -546,6 +546,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesPointPlotWithoutStyle_dark.svg b/docs/images/guides/layout/guideStylesPointPlotWithoutStyle_dark.svg
index 141182b30..dcd2b7077 100644
--- a/docs/images/guides/layout/guideStylesPointPlotWithoutStyle_dark.svg
+++ b/docs/images/guides/layout/guideStylesPointPlotWithoutStyle_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -546,6 +546,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesStripBackground.svg b/docs/images/guides/layout/guideStylesStripBackground.svg
index b7e33245e..f8896a18e 100644
--- a/docs/images/guides/layout/guideStylesStripBackground.svg
+++ b/docs/images/guides/layout/guideStylesStripBackground.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="600.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -414,7 +414,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 19.0), (169.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 19.0), (169.03394045293064, 211.0)]">
           <g transform="translate(21.961210910936405 19.0 ) ">
             <g>
               <g>
@@ -428,7 +428,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="21.961210910936405" y="19.0" width="169.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -548,7 +548,7 @@ font-size: 13.0px;
           <g transform="translate(200.99515136386705 19.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (200.99515136386705, 19.0), (169.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (200.99515136386705, 19.0), (169.03394045293064, 211.0)]">
           <g transform="translate(200.99515136386705 19.0 ) ">
             <g>
               <g>
@@ -566,7 +566,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx3">
+            <clipPath id="_sample_helper_static_id_prefix_3">
               <rect x="200.99515136386705" y="19.0" width="169.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -700,7 +700,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="452.0" y="6.0">
@@ -715,117 +715,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx5 .plot-title {
+#_sample_helper_static_id_prefix_5 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx5 .plot-subtitle {
+#_sample_helper_static_id_prefix_5 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx5 .plot-caption {
+#_sample_helper_static_id_prefix_5 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .hyperlink-element {
+#_sample_helper_static_id_prefix_5 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx5 .legend-title {
+#_sample_helper_static_id_prefix_5 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx5 .legend-item {
+#_sample_helper_static_id_prefix_5 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .axis-title-x {
+#_sample_helper_static_id_prefix_5 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx5 .axis-text-x {
+#_sample_helper_static_id_prefix_5 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx8 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_8 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .axis-title-y {
+#_sample_helper_static_id_prefix_5 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx5 .axis-text-y {
+#_sample_helper_static_id_prefix_5 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx8 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_8 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_5 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_5 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx8 .tooltip-text {
+#_sample_helper_static_id_prefix_8 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx8 .tooltip-title {
+#_sample_helper_static_id_prefix_8 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx8 .tooltip-label {
+#_sample_helper_static_id_prefix_8 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -834,7 +834,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx5">
+    <g id="_sample_helper_static_id_prefix_5">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -954,7 +954,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (171.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (171.03394045293064, 211.0)]">
           <g transform="translate(17.961210910936405 19.0 ) ">
             <g>
               <g>
@@ -968,7 +968,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx6">
+            <clipPath id="_sample_helper_static_id_prefix_6">
               <rect x="17.961210910936405" y="19.0" width="171.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -1066,7 +1066,7 @@ font-size: 13.0px;
           <g transform="translate(198.99515136386705 19.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (198.99515136386705, 19.0), (171.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (198.99515136386705, 19.0), (171.03394045293064, 211.0)]">
           <g transform="translate(198.99515136386705 19.0 ) ">
             <g>
               <g>
@@ -1084,7 +1084,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx7">
+            <clipPath id="_sample_helper_static_id_prefix_7">
               <rect x="198.99515136386705" y="19.0" width="171.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -1206,7 +1206,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx8">
+    <g id="_sample_helper_static_id_prefix_8">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="6.0" y="302.0">
@@ -1221,117 +1221,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx9 .plot-title {
+#_sample_helper_static_id_prefix_9 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx9 .plot-subtitle {
+#_sample_helper_static_id_prefix_9 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx9 .plot-caption {
+#_sample_helper_static_id_prefix_9 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .hyperlink-element {
+#_sample_helper_static_id_prefix_9 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx9 .legend-title {
+#_sample_helper_static_id_prefix_9 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx9 .legend-item {
+#_sample_helper_static_id_prefix_9 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-title-x {
+#_sample_helper_static_id_prefix_9 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx9 .axis-text-x {
+#_sample_helper_static_id_prefix_9 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-title-y {
+#_sample_helper_static_id_prefix_9 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx9 .axis-text-y {
+#_sample_helper_static_id_prefix_9 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_9 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_9 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-text {
+#_sample_helper_static_id_prefix_12 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-title {
+#_sample_helper_static_id_prefix_12 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-label {
+#_sample_helper_static_id_prefix_12 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1340,7 +1340,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx9">
+    <g id="_sample_helper_static_id_prefix_9">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1460,7 +1460,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx10)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (171.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_10)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (171.03394045293064, 211.0)]">
           <g transform="translate(17.961210910936405 19.0 ) ">
             <g>
               <g>
@@ -1474,7 +1474,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx10">
+            <clipPath id="_sample_helper_static_id_prefix_10">
               <rect x="17.961210910936405" y="19.0" width="171.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -1570,7 +1570,7 @@ font-size: 13.0px;
           <g transform="translate(198.99515136386705 19.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (198.99515136386705, 19.0), (171.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (198.99515136386705, 19.0), (171.03394045293064, 211.0)]">
           <g transform="translate(198.99515136386705 19.0 ) ">
             <g>
               <g>
@@ -1588,7 +1588,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx11">
+            <clipPath id="_sample_helper_static_id_prefix_11">
               <rect x="198.99515136386705" y="19.0" width="171.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -1708,7 +1708,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx12">
+    <g id="_sample_helper_static_id_prefix_12">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="452.0" y="302.0">
@@ -1723,117 +1723,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx13 .plot-title {
+#_sample_helper_static_id_prefix_13 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx13 .plot-subtitle {
+#_sample_helper_static_id_prefix_13 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .plot-caption {
+#_sample_helper_static_id_prefix_13 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .hyperlink-element {
+#_sample_helper_static_id_prefix_13 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx13 .legend-title {
+#_sample_helper_static_id_prefix_13 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .legend-item {
+#_sample_helper_static_id_prefix_13 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .axis-title-x {
+#_sample_helper_static_id_prefix_13 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .axis-text-x {
+#_sample_helper_static_id_prefix_13 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_16 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .axis-title-y {
+#_sample_helper_static_id_prefix_13 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .axis-text-y {
+#_sample_helper_static_id_prefix_13 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_16 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_13 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_13 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .tooltip-text {
+#_sample_helper_static_id_prefix_16 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .tooltip-title {
+#_sample_helper_static_id_prefix_16 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .tooltip-label {
+#_sample_helper_static_id_prefix_16 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1842,7 +1842,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx13">
+    <g id="_sample_helper_static_id_prefix_13">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1962,7 +1962,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (171.03394045293064, 230.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (171.03394045293064, 230.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1976,7 +1976,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx14">
+            <clipPath id="_sample_helper_static_id_prefix_14">
               <rect x="17.961210910936405" y="0.0" width="171.03394045293064" height="230.0">
               </rect>
             </clipPath>
@@ -2067,7 +2067,7 @@ font-size: 13.0px;
           <g transform="translate(198.99515136386705 0.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx15)" clip-bounds-jfx="[rect (198.99515136386705, 0.0), (171.03394045293064, 230.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_15)" clip-bounds-jfx="[rect (198.99515136386705, 0.0), (171.03394045293064, 230.0)]">
           <g transform="translate(198.99515136386705 0.0 ) ">
             <g>
               <g>
@@ -2085,7 +2085,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx15">
+            <clipPath id="_sample_helper_static_id_prefix_15">
               <rect x="198.99515136386705" y="0.0" width="171.03394045293064" height="230.0">
               </rect>
             </clipPath>
@@ -2200,7 +2200,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx16">
+    <g id="_sample_helper_static_id_prefix_16">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesStripBackground_dark.svg b/docs/images/guides/layout/guideStylesStripBackground_dark.svg
index 052718026..f49bcb925 100644
--- a/docs/images/guides/layout/guideStylesStripBackground_dark.svg
+++ b/docs/images/guides/layout/guideStylesStripBackground_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="600.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -414,7 +414,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 19.0), (169.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 19.0), (169.03394045293064, 211.0)]">
           <g transform="translate(21.961210910936405 19.0 ) ">
             <g>
               <g>
@@ -428,7 +428,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="21.961210910936405" y="19.0" width="169.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -548,7 +548,7 @@ font-size: 13.0px;
           <g transform="translate(200.99515136386705 19.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (200.99515136386705, 19.0), (169.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (200.99515136386705, 19.0), (169.03394045293064, 211.0)]">
           <g transform="translate(200.99515136386705 19.0 ) ">
             <g>
               <g>
@@ -566,7 +566,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx3">
+            <clipPath id="_sample_helper_static_id_prefix_3">
               <rect x="200.99515136386705" y="19.0" width="169.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -700,7 +700,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="452.0" y="6.0">
@@ -715,117 +715,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx5 .plot-title {
+#_sample_helper_static_id_prefix_5 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx5 .plot-subtitle {
+#_sample_helper_static_id_prefix_5 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx5 .plot-caption {
+#_sample_helper_static_id_prefix_5 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .hyperlink-element {
+#_sample_helper_static_id_prefix_5 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx5 .legend-title {
+#_sample_helper_static_id_prefix_5 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx5 .legend-item {
+#_sample_helper_static_id_prefix_5 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .axis-title-x {
+#_sample_helper_static_id_prefix_5 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx5 .axis-text-x {
+#_sample_helper_static_id_prefix_5 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx8 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_8 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .axis-title-y {
+#_sample_helper_static_id_prefix_5 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx5 .axis-text-y {
+#_sample_helper_static_id_prefix_5 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx8 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_8 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_5 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_5 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx8 .tooltip-text {
+#_sample_helper_static_id_prefix_8 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx8 .tooltip-title {
+#_sample_helper_static_id_prefix_8 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx8 .tooltip-label {
+#_sample_helper_static_id_prefix_8 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -834,7 +834,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx5">
+    <g id="_sample_helper_static_id_prefix_5">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -954,7 +954,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (171.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (171.03394045293064, 211.0)]">
           <g transform="translate(17.961210910936405 19.0 ) ">
             <g>
               <g>
@@ -968,7 +968,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx6">
+            <clipPath id="_sample_helper_static_id_prefix_6">
               <rect x="17.961210910936405" y="19.0" width="171.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -1066,7 +1066,7 @@ font-size: 13.0px;
           <g transform="translate(198.99515136386705 19.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (198.99515136386705, 19.0), (171.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (198.99515136386705, 19.0), (171.03394045293064, 211.0)]">
           <g transform="translate(198.99515136386705 19.0 ) ">
             <g>
               <g>
@@ -1084,7 +1084,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx7">
+            <clipPath id="_sample_helper_static_id_prefix_7">
               <rect x="198.99515136386705" y="19.0" width="171.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -1206,7 +1206,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx8">
+    <g id="_sample_helper_static_id_prefix_8">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="6.0" y="302.0">
@@ -1221,117 +1221,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx9 .plot-title {
+#_sample_helper_static_id_prefix_9 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx9 .plot-subtitle {
+#_sample_helper_static_id_prefix_9 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx9 .plot-caption {
+#_sample_helper_static_id_prefix_9 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .hyperlink-element {
+#_sample_helper_static_id_prefix_9 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx9 .legend-title {
+#_sample_helper_static_id_prefix_9 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx9 .legend-item {
+#_sample_helper_static_id_prefix_9 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-title-x {
+#_sample_helper_static_id_prefix_9 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx9 .axis-text-x {
+#_sample_helper_static_id_prefix_9 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-title-y {
+#_sample_helper_static_id_prefix_9 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx9 .axis-text-y {
+#_sample_helper_static_id_prefix_9 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_9 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_9 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-text {
+#_sample_helper_static_id_prefix_12 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-title {
+#_sample_helper_static_id_prefix_12 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-label {
+#_sample_helper_static_id_prefix_12 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1340,7 +1340,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx9">
+    <g id="_sample_helper_static_id_prefix_9">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1460,7 +1460,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx10)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (171.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_10)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (171.03394045293064, 211.0)]">
           <g transform="translate(17.961210910936405 19.0 ) ">
             <g>
               <g>
@@ -1474,7 +1474,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx10">
+            <clipPath id="_sample_helper_static_id_prefix_10">
               <rect x="17.961210910936405" y="19.0" width="171.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -1570,7 +1570,7 @@ font-size: 13.0px;
           <g transform="translate(198.99515136386705 19.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (198.99515136386705, 19.0), (171.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (198.99515136386705, 19.0), (171.03394045293064, 211.0)]">
           <g transform="translate(198.99515136386705 19.0 ) ">
             <g>
               <g>
@@ -1588,7 +1588,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx11">
+            <clipPath id="_sample_helper_static_id_prefix_11">
               <rect x="198.99515136386705" y="19.0" width="171.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -1708,7 +1708,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx12">
+    <g id="_sample_helper_static_id_prefix_12">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="452.0" y="302.0">
@@ -1723,117 +1723,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx13 .plot-title {
+#_sample_helper_static_id_prefix_13 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx13 .plot-subtitle {
+#_sample_helper_static_id_prefix_13 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .plot-caption {
+#_sample_helper_static_id_prefix_13 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .hyperlink-element {
+#_sample_helper_static_id_prefix_13 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx13 .legend-title {
+#_sample_helper_static_id_prefix_13 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .legend-item {
+#_sample_helper_static_id_prefix_13 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .axis-title-x {
+#_sample_helper_static_id_prefix_13 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .axis-text-x {
+#_sample_helper_static_id_prefix_13 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_16 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .axis-title-y {
+#_sample_helper_static_id_prefix_13 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .axis-text-y {
+#_sample_helper_static_id_prefix_13 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_16 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_13 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_13 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .tooltip-text {
+#_sample_helper_static_id_prefix_16 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .tooltip-title {
+#_sample_helper_static_id_prefix_16 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .tooltip-label {
+#_sample_helper_static_id_prefix_16 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1842,7 +1842,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx13">
+    <g id="_sample_helper_static_id_prefix_13">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1962,7 +1962,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (171.03394045293064, 230.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (171.03394045293064, 230.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1976,7 +1976,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx14">
+            <clipPath id="_sample_helper_static_id_prefix_14">
               <rect x="17.961210910936405" y="0.0" width="171.03394045293064" height="230.0">
               </rect>
             </clipPath>
@@ -2067,7 +2067,7 @@ font-size: 13.0px;
           <g transform="translate(198.99515136386705 0.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx15)" clip-bounds-jfx="[rect (198.99515136386705, 0.0), (171.03394045293064, 230.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_15)" clip-bounds-jfx="[rect (198.99515136386705, 0.0), (171.03394045293064, 230.0)]">
           <g transform="translate(198.99515136386705 0.0 ) ">
             <g>
               <g>
@@ -2085,7 +2085,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx15">
+            <clipPath id="_sample_helper_static_id_prefix_15">
               <rect x="198.99515136386705" y="0.0" width="171.03394045293064" height="230.0">
               </rect>
             </clipPath>
@@ -2200,7 +2200,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx16">
+    <g id="_sample_helper_static_id_prefix_16">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesTextLegendStrip.svg b/docs/images/guides/layout/guideStylesTextLegendStrip.svg
index d61e5430b..6044d11fd 100644
--- a/docs/images/guides/layout/guideStylesTextLegendStrip.svg
+++ b/docs/images/guides/layout/guideStylesTextLegendStrip.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="600.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -384,7 +384,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (171.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (171.03394045293064, 211.0)]">
           <g transform="translate(17.961210910936405 19.0 ) ">
             <g>
               <g>
@@ -398,7 +398,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.961210910936405" y="19.0" width="171.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -494,7 +494,7 @@ font-size: 13.0px;
           <g transform="translate(198.99515136386705 19.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (198.99515136386705, 19.0), (171.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (198.99515136386705, 19.0), (171.03394045293064, 211.0)]">
           <g transform="translate(198.99515136386705 19.0 ) ">
             <g>
               <g>
@@ -512,7 +512,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx3">
+            <clipPath id="_sample_helper_static_id_prefix_3">
               <rect x="198.99515136386705" y="19.0" width="171.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -632,7 +632,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="452.0" y="6.0">
@@ -647,117 +647,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx5 .plot-title {
+#_sample_helper_static_id_prefix_5 .plot-title {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx5 .plot-subtitle {
+#_sample_helper_static_id_prefix_5 .plot-subtitle {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx5 .plot-caption {
+#_sample_helper_static_id_prefix_5 .plot-caption {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .hyperlink-element {
+#_sample_helper_static_id_prefix_5 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx5 .legend-title {
+#_sample_helper_static_id_prefix_5 .legend-title {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx5 .legend-item {
+#_sample_helper_static_id_prefix_5 .legend-item {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .axis-title-x {
+#_sample_helper_static_id_prefix_5 .axis-title-x {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx5 .axis-text-x {
+#_sample_helper_static_id_prefix_5 .axis-text-x {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx8 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_8 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .axis-title-y {
+#_sample_helper_static_id_prefix_5 .axis-title-y {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx5 .axis-text-y {
+#_sample_helper_static_id_prefix_5 .axis-text-y {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx8 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_8 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_5 .facet-strip-text-x {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_5 .facet-strip-text-y {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx8 .tooltip-text {
+#_sample_helper_static_id_prefix_8 .tooltip-text {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx8 .tooltip-title {
+#_sample_helper_static_id_prefix_8 .tooltip-title {
 fill: #31a354;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx8 .tooltip-label {
+#_sample_helper_static_id_prefix_8 .tooltip-label {
 fill: #31a354;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -766,7 +766,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx5">
+    <g id="_sample_helper_static_id_prefix_5">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -886,7 +886,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (171.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (171.03394045293064, 211.0)]">
           <g transform="translate(17.961210910936405 19.0 ) ">
             <g>
               <g>
@@ -900,7 +900,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx6">
+            <clipPath id="_sample_helper_static_id_prefix_6">
               <rect x="17.961210910936405" y="19.0" width="171.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -996,7 +996,7 @@ font-size: 13.0px;
           <g transform="translate(198.99515136386705 19.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (198.99515136386705, 19.0), (171.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (198.99515136386705, 19.0), (171.03394045293064, 211.0)]">
           <g transform="translate(198.99515136386705 19.0 ) ">
             <g>
               <g>
@@ -1014,7 +1014,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx7">
+            <clipPath id="_sample_helper_static_id_prefix_7">
               <rect x="198.99515136386705" y="19.0" width="171.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -1134,7 +1134,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx8">
+    <g id="_sample_helper_static_id_prefix_8">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="6.0" y="302.0">
@@ -1149,117 +1149,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx9 .plot-title {
+#_sample_helper_static_id_prefix_9 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx9 .plot-subtitle {
+#_sample_helper_static_id_prefix_9 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx9 .plot-caption {
+#_sample_helper_static_id_prefix_9 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .hyperlink-element {
+#_sample_helper_static_id_prefix_9 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx9 .legend-title {
+#_sample_helper_static_id_prefix_9 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx9 .legend-item {
+#_sample_helper_static_id_prefix_9 .legend-item {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-title-x {
+#_sample_helper_static_id_prefix_9 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx9 .axis-text-x {
+#_sample_helper_static_id_prefix_9 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-title-y {
+#_sample_helper_static_id_prefix_9 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx9 .axis-text-y {
+#_sample_helper_static_id_prefix_9 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_9 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_9 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-text {
+#_sample_helper_static_id_prefix_12 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-title {
+#_sample_helper_static_id_prefix_12 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-label {
+#_sample_helper_static_id_prefix_12 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1268,7 +1268,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx9">
+    <g id="_sample_helper_static_id_prefix_9">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1388,7 +1388,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx10)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (171.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_10)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (171.03394045293064, 211.0)]">
           <g transform="translate(17.961210910936405 19.0 ) ">
             <g>
               <g>
@@ -1402,7 +1402,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx10">
+            <clipPath id="_sample_helper_static_id_prefix_10">
               <rect x="17.961210910936405" y="19.0" width="171.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -1498,7 +1498,7 @@ font-size: 13.0px;
           <g transform="translate(198.99515136386705 19.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (198.99515136386705, 19.0), (171.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (198.99515136386705, 19.0), (171.03394045293064, 211.0)]">
           <g transform="translate(198.99515136386705 19.0 ) ">
             <g>
               <g>
@@ -1516,7 +1516,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx11">
+            <clipPath id="_sample_helper_static_id_prefix_11">
               <rect x="198.99515136386705" y="19.0" width="171.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -1636,7 +1636,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx12">
+    <g id="_sample_helper_static_id_prefix_12">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="452.0" y="302.0">
@@ -1651,117 +1651,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx13 .plot-title {
+#_sample_helper_static_id_prefix_13 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx13 .plot-subtitle {
+#_sample_helper_static_id_prefix_13 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .plot-caption {
+#_sample_helper_static_id_prefix_13 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .hyperlink-element {
+#_sample_helper_static_id_prefix_13 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx13 .legend-title {
+#_sample_helper_static_id_prefix_13 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .legend-item {
+#_sample_helper_static_id_prefix_13 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .axis-title-x {
+#_sample_helper_static_id_prefix_13 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .axis-text-x {
+#_sample_helper_static_id_prefix_13 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_16 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .axis-title-y {
+#_sample_helper_static_id_prefix_13 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .axis-text-y {
+#_sample_helper_static_id_prefix_13 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_16 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_13 .facet-strip-text-x {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_13 .facet-strip-text-y {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .tooltip-text {
+#_sample_helper_static_id_prefix_16 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .tooltip-title {
+#_sample_helper_static_id_prefix_16 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .tooltip-label {
+#_sample_helper_static_id_prefix_16 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1770,7 +1770,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx13">
+    <g id="_sample_helper_static_id_prefix_13">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1890,7 +1890,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (171.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (171.03394045293064, 211.0)]">
           <g transform="translate(17.961210910936405 19.0 ) ">
             <g>
               <g>
@@ -1904,7 +1904,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx14">
+            <clipPath id="_sample_helper_static_id_prefix_14">
               <rect x="17.961210910936405" y="19.0" width="171.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -2000,7 +2000,7 @@ font-size: 13.0px;
           <g transform="translate(198.99515136386705 19.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx15)" clip-bounds-jfx="[rect (198.99515136386705, 19.0), (171.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_15)" clip-bounds-jfx="[rect (198.99515136386705, 19.0), (171.03394045293064, 211.0)]">
           <g transform="translate(198.99515136386705 19.0 ) ">
             <g>
               <g>
@@ -2018,7 +2018,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx15">
+            <clipPath id="_sample_helper_static_id_prefix_15">
               <rect x="198.99515136386705" y="19.0" width="171.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -2138,7 +2138,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx16">
+    <g id="_sample_helper_static_id_prefix_16">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesTextLegendStrip_dark.svg b/docs/images/guides/layout/guideStylesTextLegendStrip_dark.svg
index ad4370a16..1a5961dd1 100644
--- a/docs/images/guides/layout/guideStylesTextLegendStrip_dark.svg
+++ b/docs/images/guides/layout/guideStylesTextLegendStrip_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="600.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -384,7 +384,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (171.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (171.03394045293064, 211.0)]">
           <g transform="translate(17.961210910936405 19.0 ) ">
             <g>
               <g>
@@ -398,7 +398,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.961210910936405" y="19.0" width="171.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -494,7 +494,7 @@ font-size: 13.0px;
           <g transform="translate(198.99515136386705 19.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (198.99515136386705, 19.0), (171.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (198.99515136386705, 19.0), (171.03394045293064, 211.0)]">
           <g transform="translate(198.99515136386705 19.0 ) ">
             <g>
               <g>
@@ -512,7 +512,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx3">
+            <clipPath id="_sample_helper_static_id_prefix_3">
               <rect x="198.99515136386705" y="19.0" width="171.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -632,7 +632,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="452.0" y="6.0">
@@ -647,117 +647,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx5 .plot-title {
+#_sample_helper_static_id_prefix_5 .plot-title {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx5 .plot-subtitle {
+#_sample_helper_static_id_prefix_5 .plot-subtitle {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx5 .plot-caption {
+#_sample_helper_static_id_prefix_5 .plot-caption {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .hyperlink-element {
+#_sample_helper_static_id_prefix_5 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx5 .legend-title {
+#_sample_helper_static_id_prefix_5 .legend-title {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx5 .legend-item {
+#_sample_helper_static_id_prefix_5 .legend-item {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .axis-title-x {
+#_sample_helper_static_id_prefix_5 .axis-title-x {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx5 .axis-text-x {
+#_sample_helper_static_id_prefix_5 .axis-text-x {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx8 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_8 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .axis-title-y {
+#_sample_helper_static_id_prefix_5 .axis-title-y {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx5 .axis-text-y {
+#_sample_helper_static_id_prefix_5 .axis-text-y {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx8 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_8 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_5 .facet-strip-text-x {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_5 .facet-strip-text-y {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx8 .tooltip-text {
+#_sample_helper_static_id_prefix_8 .tooltip-text {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx8 .tooltip-title {
+#_sample_helper_static_id_prefix_8 .tooltip-title {
 fill: #31a354;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx8 .tooltip-label {
+#_sample_helper_static_id_prefix_8 .tooltip-label {
 fill: #31a354;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -766,7 +766,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx5">
+    <g id="_sample_helper_static_id_prefix_5">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -886,7 +886,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (171.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (171.03394045293064, 211.0)]">
           <g transform="translate(17.961210910936405 19.0 ) ">
             <g>
               <g>
@@ -900,7 +900,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx6">
+            <clipPath id="_sample_helper_static_id_prefix_6">
               <rect x="17.961210910936405" y="19.0" width="171.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -996,7 +996,7 @@ font-size: 13.0px;
           <g transform="translate(198.99515136386705 19.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (198.99515136386705, 19.0), (171.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (198.99515136386705, 19.0), (171.03394045293064, 211.0)]">
           <g transform="translate(198.99515136386705 19.0 ) ">
             <g>
               <g>
@@ -1014,7 +1014,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx7">
+            <clipPath id="_sample_helper_static_id_prefix_7">
               <rect x="198.99515136386705" y="19.0" width="171.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -1134,7 +1134,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx8">
+    <g id="_sample_helper_static_id_prefix_8">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="6.0" y="302.0">
@@ -1149,117 +1149,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx9 .plot-title {
+#_sample_helper_static_id_prefix_9 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx9 .plot-subtitle {
+#_sample_helper_static_id_prefix_9 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx9 .plot-caption {
+#_sample_helper_static_id_prefix_9 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .hyperlink-element {
+#_sample_helper_static_id_prefix_9 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx9 .legend-title {
+#_sample_helper_static_id_prefix_9 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx9 .legend-item {
+#_sample_helper_static_id_prefix_9 .legend-item {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-title-x {
+#_sample_helper_static_id_prefix_9 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx9 .axis-text-x {
+#_sample_helper_static_id_prefix_9 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-title-y {
+#_sample_helper_static_id_prefix_9 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx9 .axis-text-y {
+#_sample_helper_static_id_prefix_9 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_9 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_9 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-text {
+#_sample_helper_static_id_prefix_12 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-title {
+#_sample_helper_static_id_prefix_12 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-label {
+#_sample_helper_static_id_prefix_12 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1268,7 +1268,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx9">
+    <g id="_sample_helper_static_id_prefix_9">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1388,7 +1388,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx10)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (171.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_10)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (171.03394045293064, 211.0)]">
           <g transform="translate(17.961210910936405 19.0 ) ">
             <g>
               <g>
@@ -1402,7 +1402,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx10">
+            <clipPath id="_sample_helper_static_id_prefix_10">
               <rect x="17.961210910936405" y="19.0" width="171.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -1498,7 +1498,7 @@ font-size: 13.0px;
           <g transform="translate(198.99515136386705 19.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (198.99515136386705, 19.0), (171.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (198.99515136386705, 19.0), (171.03394045293064, 211.0)]">
           <g transform="translate(198.99515136386705 19.0 ) ">
             <g>
               <g>
@@ -1516,7 +1516,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx11">
+            <clipPath id="_sample_helper_static_id_prefix_11">
               <rect x="198.99515136386705" y="19.0" width="171.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -1636,7 +1636,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx12">
+    <g id="_sample_helper_static_id_prefix_12">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="452.0" y="302.0">
@@ -1651,117 +1651,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx13 .plot-title {
+#_sample_helper_static_id_prefix_13 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx13 .plot-subtitle {
+#_sample_helper_static_id_prefix_13 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .plot-caption {
+#_sample_helper_static_id_prefix_13 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .hyperlink-element {
+#_sample_helper_static_id_prefix_13 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx13 .legend-title {
+#_sample_helper_static_id_prefix_13 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .legend-item {
+#_sample_helper_static_id_prefix_13 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .axis-title-x {
+#_sample_helper_static_id_prefix_13 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .axis-text-x {
+#_sample_helper_static_id_prefix_13 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_16 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .axis-title-y {
+#_sample_helper_static_id_prefix_13 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .axis-text-y {
+#_sample_helper_static_id_prefix_13 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_16 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_13 .facet-strip-text-x {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_13 .facet-strip-text-y {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .tooltip-text {
+#_sample_helper_static_id_prefix_16 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .tooltip-title {
+#_sample_helper_static_id_prefix_16 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .tooltip-label {
+#_sample_helper_static_id_prefix_16 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1770,7 +1770,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx13">
+    <g id="_sample_helper_static_id_prefix_13">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1890,7 +1890,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (171.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (171.03394045293064, 211.0)]">
           <g transform="translate(17.961210910936405 19.0 ) ">
             <g>
               <g>
@@ -1904,7 +1904,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx14">
+            <clipPath id="_sample_helper_static_id_prefix_14">
               <rect x="17.961210910936405" y="19.0" width="171.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -2000,7 +2000,7 @@ font-size: 13.0px;
           <g transform="translate(198.99515136386705 19.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx15)" clip-bounds-jfx="[rect (198.99515136386705, 19.0), (171.03394045293064, 211.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_15)" clip-bounds-jfx="[rect (198.99515136386705, 19.0), (171.03394045293064, 211.0)]">
           <g transform="translate(198.99515136386705 19.0 ) ">
             <g>
               <g>
@@ -2018,7 +2018,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx15">
+            <clipPath id="_sample_helper_static_id_prefix_15">
               <rect x="198.99515136386705" y="19.0" width="171.03394045293064" height="211.0">
               </rect>
             </clipPath>
@@ -2138,7 +2138,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx16">
+    <g id="_sample_helper_static_id_prefix_16">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesTextTitleLegend.svg b/docs/images/guides/layout/guideStylesTextTitleLegend.svg
index 7761bb20d..67c99d6a8 100644
--- a/docs/images/guides/layout/guideStylesTextTitleLegend.svg
+++ b/docs/images/guides/layout/guideStylesTextTitleLegend.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="600.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -375,7 +375,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 230.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 230.0)]">
           <g transform="translate(25.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -393,7 +393,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="25.941816366404606" y="0.0" width="344.08727545039307" height="230.0">
               </rect>
             </clipPath>
@@ -508,7 +508,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="452.0" y="6.0">
@@ -523,117 +523,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #31a354;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #31a354;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -642,7 +642,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -753,7 +753,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 230.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 230.0)]">
           <g transform="translate(25.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -771,7 +771,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="25.941816366404606" y="0.0" width="344.08727545039307" height="230.0">
               </rect>
             </clipPath>
@@ -886,7 +886,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="6.0" y="302.0">
@@ -901,117 +901,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx7 .plot-title {
+#_sample_helper_static_id_prefix_7 .plot-title {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx7 .plot-subtitle {
+#_sample_helper_static_id_prefix_7 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .plot-caption {
+#_sample_helper_static_id_prefix_7 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .hyperlink-element {
+#_sample_helper_static_id_prefix_7 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx7 .legend-title {
+#_sample_helper_static_id_prefix_7 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .legend-item {
+#_sample_helper_static_id_prefix_7 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-x {
+#_sample_helper_static_id_prefix_7 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-x {
+#_sample_helper_static_id_prefix_7 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-y {
+#_sample_helper_static_id_prefix_7 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-y {
+#_sample_helper_static_id_prefix_7 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-text {
+#_sample_helper_static_id_prefix_9 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-title {
+#_sample_helper_static_id_prefix_9 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-label {
+#_sample_helper_static_id_prefix_9 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1020,7 +1020,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx7">
+    <g id="_sample_helper_static_id_prefix_7">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1131,7 +1131,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 230.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 230.0)]">
           <g transform="translate(25.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -1149,7 +1149,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx8">
+            <clipPath id="_sample_helper_static_id_prefix_8">
               <rect x="25.941816366404606" y="0.0" width="344.08727545039307" height="230.0">
               </rect>
             </clipPath>
@@ -1264,7 +1264,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx9">
+    <g id="_sample_helper_static_id_prefix_9">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="452.0" y="302.0">
@@ -1279,117 +1279,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx10 .plot-title {
+#_sample_helper_static_id_prefix_10 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx10 .plot-subtitle {
+#_sample_helper_static_id_prefix_10 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .plot-caption {
+#_sample_helper_static_id_prefix_10 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .hyperlink-element {
+#_sample_helper_static_id_prefix_10 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx10 .legend-title {
+#_sample_helper_static_id_prefix_10 .legend-title {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .legend-item {
+#_sample_helper_static_id_prefix_10 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-title-x {
+#_sample_helper_static_id_prefix_10 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .axis-text-x {
+#_sample_helper_static_id_prefix_10 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-title-y {
+#_sample_helper_static_id_prefix_10 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .axis-text-y {
+#_sample_helper_static_id_prefix_10 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_10 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_10 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-text {
+#_sample_helper_static_id_prefix_12 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-title {
+#_sample_helper_static_id_prefix_12 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-label {
+#_sample_helper_static_id_prefix_12 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1398,7 +1398,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx10">
+    <g id="_sample_helper_static_id_prefix_10">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1509,7 +1509,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 230.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 230.0)]">
           <g transform="translate(25.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -1527,7 +1527,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx11">
+            <clipPath id="_sample_helper_static_id_prefix_11">
               <rect x="25.941816366404606" y="0.0" width="344.08727545039307" height="230.0">
               </rect>
             </clipPath>
@@ -1642,7 +1642,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx12">
+    <g id="_sample_helper_static_id_prefix_12">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesTextTitleLegend_dark.svg b/docs/images/guides/layout/guideStylesTextTitleLegend_dark.svg
index 9f8c24021..91cbc02c3 100644
--- a/docs/images/guides/layout/guideStylesTextTitleLegend_dark.svg
+++ b/docs/images/guides/layout/guideStylesTextTitleLegend_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="600.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -375,7 +375,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 230.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 230.0)]">
           <g transform="translate(25.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -393,7 +393,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="25.941816366404606" y="0.0" width="344.08727545039307" height="230.0">
               </rect>
             </clipPath>
@@ -508,7 +508,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="452.0" y="6.0">
@@ -523,117 +523,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #31a354;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #31a354;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -642,7 +642,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -753,7 +753,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 230.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 230.0)]">
           <g transform="translate(25.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -771,7 +771,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="25.941816366404606" y="0.0" width="344.08727545039307" height="230.0">
               </rect>
             </clipPath>
@@ -886,7 +886,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="6.0" y="302.0">
@@ -901,117 +901,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx7 .plot-title {
+#_sample_helper_static_id_prefix_7 .plot-title {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx7 .plot-subtitle {
+#_sample_helper_static_id_prefix_7 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .plot-caption {
+#_sample_helper_static_id_prefix_7 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .hyperlink-element {
+#_sample_helper_static_id_prefix_7 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx7 .legend-title {
+#_sample_helper_static_id_prefix_7 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .legend-item {
+#_sample_helper_static_id_prefix_7 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-x {
+#_sample_helper_static_id_prefix_7 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-x {
+#_sample_helper_static_id_prefix_7 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-y {
+#_sample_helper_static_id_prefix_7 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-y {
+#_sample_helper_static_id_prefix_7 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-text {
+#_sample_helper_static_id_prefix_9 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-title {
+#_sample_helper_static_id_prefix_9 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-label {
+#_sample_helper_static_id_prefix_9 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1020,7 +1020,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx7">
+    <g id="_sample_helper_static_id_prefix_7">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1131,7 +1131,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 230.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 230.0)]">
           <g transform="translate(25.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -1149,7 +1149,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx8">
+            <clipPath id="_sample_helper_static_id_prefix_8">
               <rect x="25.941816366404606" y="0.0" width="344.08727545039307" height="230.0">
               </rect>
             </clipPath>
@@ -1264,7 +1264,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx9">
+    <g id="_sample_helper_static_id_prefix_9">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="452.0" y="302.0">
@@ -1279,117 +1279,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx10 .plot-title {
+#_sample_helper_static_id_prefix_10 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx10 .plot-subtitle {
+#_sample_helper_static_id_prefix_10 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .plot-caption {
+#_sample_helper_static_id_prefix_10 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .hyperlink-element {
+#_sample_helper_static_id_prefix_10 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx10 .legend-title {
+#_sample_helper_static_id_prefix_10 .legend-title {
 fill: #31a354;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .legend-item {
+#_sample_helper_static_id_prefix_10 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-title-x {
+#_sample_helper_static_id_prefix_10 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .axis-text-x {
+#_sample_helper_static_id_prefix_10 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-title-y {
+#_sample_helper_static_id_prefix_10 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .axis-text-y {
+#_sample_helper_static_id_prefix_10 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_10 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_10 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-text {
+#_sample_helper_static_id_prefix_12 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-title {
+#_sample_helper_static_id_prefix_12 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-label {
+#_sample_helper_static_id_prefix_12 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1398,7 +1398,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx10">
+    <g id="_sample_helper_static_id_prefix_10">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1509,7 +1509,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 230.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (344.08727545039307, 230.0)]">
           <g transform="translate(25.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -1527,7 +1527,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx11">
+            <clipPath id="_sample_helper_static_id_prefix_11">
               <rect x="25.941816366404606" y="0.0" width="344.08727545039307" height="230.0">
               </rect>
             </clipPath>
@@ -1642,7 +1642,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx12">
+    <g id="_sample_helper_static_id_prefix_12">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesTooltipAndBackground.svg b/docs/images/guides/layout/guideStylesTooltipAndBackground.svg
index 580d3220f..f216df7db 100644
--- a/docs/images/guides/layout/guideStylesTooltipAndBackground.svg
+++ b/docs/images/guides/layout/guideStylesTooltipAndBackground.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="400.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -304,7 +304,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (352.0678809058613, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (352.0678809058613, 326.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -550,7 +550,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.961210910936405" y="0.0" width="352.0678809058613" height="326.0">
               </rect>
             </clipPath>
@@ -779,7 +779,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="388.0" x="452.0" y="6.0">
@@ -794,117 +794,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -913,7 +913,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1064,7 +1064,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (352.0678809058613, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (352.0678809058613, 326.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1310,7 +1310,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.961210910936405" y="0.0" width="352.0678809058613" height="326.0">
               </rect>
             </clipPath>
@@ -1442,7 +1442,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideStylesTooltipAndBackground_dark.svg b/docs/images/guides/layout/guideStylesTooltipAndBackground_dark.svg
index 786f6f54a..a0c4ffa57 100644
--- a/docs/images/guides/layout/guideStylesTooltipAndBackground_dark.svg
+++ b/docs/images/guides/layout/guideStylesTooltipAndBackground_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="400.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -413,7 +413,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (352.0678809058613, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (352.0678809058613, 326.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -659,7 +659,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.961210910936405" y="0.0" width="352.0678809058613" height="326.0">
               </rect>
             </clipPath>
@@ -779,7 +779,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="388.0" x="452.0" y="6.0">
@@ -794,117 +794,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -913,7 +913,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1064,7 +1064,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (352.0678809058613, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (352.0678809058613, 326.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1310,7 +1310,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.961210910936405" y="0.0" width="352.0678809058613" height="326.0">
               </rect>
             </clipPath>
@@ -1442,7 +1442,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleChangeColorAndFontFace.svg b/docs/images/guides/layout/guideTitleChangeColorAndFontFace.svg
index 252201f4f..72cbfbead 100644
--- a/docs/images/guides/layout/guideTitleChangeColorAndFontFace.svg
+++ b/docs/images/guides/layout/guideTitleChangeColorAndFontFace.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #5470c6;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: italic;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: italic;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 41.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (18.238373906855962, 0.0), (614.5828456630021, 376.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (18.238373906855962, 0.0), (614.5828456630021, 376.0)]">
         <g transform="translate(18.238373906855962 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="18.238373906855962" y="0.0" width="614.5828456630021" height="376.0">
             </rect>
           </clipPath>
@@ -622,6 +622,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleChangeColorAndFontFace_dark.svg b/docs/images/guides/layout/guideTitleChangeColorAndFontFace_dark.svg
index bbf74980d..a59b27390 100644
--- a/docs/images/guides/layout/guideTitleChangeColorAndFontFace_dark.svg
+++ b/docs/images/guides/layout/guideTitleChangeColorAndFontFace_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #5470c6;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: italic;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: italic;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: italic;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 41.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (18.238373906855962, 0.0), (614.5828456630021, 376.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (18.238373906855962, 0.0), (614.5828456630021, 376.0)]">
         <g transform="translate(18.238373906855962 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="18.238373906855962" y="0.0" width="614.5828456630021" height="376.0">
             </rect>
           </clipPath>
@@ -622,6 +622,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleChangeTitlesColor.svg b/docs/images/guides/layout/guideTitleChangeTitlesColor.svg
index c9be7c1ea..993fcee57 100644
--- a/docs/images/guides/layout/guideTitleChangeTitlesColor.svg
+++ b/docs/images/guides/layout/guideTitleChangeTitlesColor.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #5470c6;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #5470c6;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #5470c6;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #5470c6;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #5470c6;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #5470c6;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 41.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 376.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 376.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="376.0">
             </rect>
           </clipPath>
@@ -622,6 +622,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleChangeTitlesColor_dark.svg b/docs/images/guides/layout/guideTitleChangeTitlesColor_dark.svg
index 51e947e76..86fc93e20 100644
--- a/docs/images/guides/layout/guideTitleChangeTitlesColor_dark.svg
+++ b/docs/images/guides/layout/guideTitleChangeTitlesColor_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #5470c6;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #5470c6;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #5470c6;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #5470c6;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #5470c6;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #5470c6;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 41.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 376.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 376.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="376.0">
             </rect>
           </clipPath>
@@ -622,6 +622,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleComplexLegendBottom.svg b/docs/images/guides/layout/guideTitleComplexLegendBottom.svg
index 67ef31131..bbf08b68d 100644
--- a/docs/images/guides/layout/guideTitleComplexLegendBottom.svg
+++ b/docs/images/guides/layout/guideTitleComplexLegendBottom.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -344,7 +344,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 323.6666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 323.6666666666667)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -590,7 +590,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="323.6666666666667">
             </rect>
           </clipPath>
@@ -788,6 +788,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleComplexLegendBottom_dark.svg b/docs/images/guides/layout/guideTitleComplexLegendBottom_dark.svg
index 3ea6df858..dbbdbd898 100644
--- a/docs/images/guides/layout/guideTitleComplexLegendBottom_dark.svg
+++ b/docs/images/guides/layout/guideTitleComplexLegendBottom_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -344,7 +344,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 323.6666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 323.6666666666667)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -590,7 +590,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="323.6666666666667">
             </rect>
           </clipPath>
@@ -788,6 +788,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleComplexLegendNames.svg b/docs/images/guides/layout/guideTitleComplexLegendNames.svg
index 8387ab881..d7b0a3f77 100644
--- a/docs/images/guides/layout/guideTitleComplexLegendNames.svg
+++ b/docs/images/guides/layout/guideTitleComplexLegendNames.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (492.1546196859565, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (492.1546196859565, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -415,7 +415,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="492.1546196859565" height="424.0">
             </rect>
           </clipPath>
@@ -722,6 +722,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleComplexLegendNames_dark.svg b/docs/images/guides/layout/guideTitleComplexLegendNames_dark.svg
index cbcb2e684..34b95aa1b 100644
--- a/docs/images/guides/layout/guideTitleComplexLegendNames_dark.svg
+++ b/docs/images/guides/layout/guideTitleComplexLegendNames_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (492.1546196859565, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (492.1546196859565, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="492.1546196859565" height="424.0">
             </rect>
           </clipPath>
@@ -722,6 +722,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleComplexTitles.svg b/docs/images/guides/layout/guideTitleComplexTitles.svg
index 64484a1c6..305e08be3 100644
--- a/docs/images/guides/layout/guideTitleComplexTitles.svg
+++ b/docs/images/guides/layout/guideTitleComplexTitles.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #a39999;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 72.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 332.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 332.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="332.0">
             </rect>
           </clipPath>
@@ -631,6 +631,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleComplexTitles_dark.svg b/docs/images/guides/layout/guideTitleComplexTitles_dark.svg
index 935b1a593..f432a0da9 100644
--- a/docs/images/guides/layout/guideTitleComplexTitles_dark.svg
+++ b/docs/images/guides/layout/guideTitleComplexTitles_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #a39999;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 72.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 332.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 332.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="332.0">
             </rect>
           </clipPath>
@@ -631,6 +631,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleDefaultPointPlot.svg b/docs/images/guides/layout/guideTitleDefaultPointPlot.svg
index 8919a3ecb..b092d2b50 100644
--- a/docs/images/guides/layout/guideTitleDefaultPointPlot.svg
+++ b/docs/images/guides/layout/guideTitleDefaultPointPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -415,7 +415,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -607,6 +607,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleDefaultPointPlot_dark.svg b/docs/images/guides/layout/guideTitleDefaultPointPlot_dark.svg
index 1df876ac1..e94809f24 100644
--- a/docs/images/guides/layout/guideTitleDefaultPointPlot_dark.svg
+++ b/docs/images/guides/layout/guideTitleDefaultPointPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -607,6 +607,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleLegendName.svg b/docs/images/guides/layout/guideTitleLegendName.svg
index 13e0c1088..5c14044bd 100644
--- a/docs/images/guides/layout/guideTitleLegendName.svg
+++ b/docs/images/guides/layout/guideTitleLegendName.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (550.2501119994373, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (550.2501119994373, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -415,7 +415,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="550.2501119994373" height="424.0">
             </rect>
           </clipPath>
@@ -716,6 +716,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleLegendName_dark.svg b/docs/images/guides/layout/guideTitleLegendName_dark.svg
index e79bec15e..64e06b992 100644
--- a/docs/images/guides/layout/guideTitleLegendName_dark.svg
+++ b/docs/images/guides/layout/guideTitleLegendName_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (550.2501119994373, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (550.2501119994373, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="550.2501119994373" height="424.0">
             </rect>
           </clipPath>
@@ -716,6 +716,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleLegendPosition.svg b/docs/images/guides/layout/guideTitleLegendPosition.svg
index e55e30c2a..e4953e531 100644
--- a/docs/images/guides/layout/guideTitleLegendPosition.svg
+++ b/docs/images/guides/layout/guideTitleLegendPosition.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -344,7 +344,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 330.6666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 330.6666666666667)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -590,7 +590,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="330.6666666666667">
             </rect>
           </clipPath>
@@ -782,6 +782,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleLegendPosition_dark.svg b/docs/images/guides/layout/guideTitleLegendPosition_dark.svg
index 67e185117..a30e744cd 100644
--- a/docs/images/guides/layout/guideTitleLegendPosition_dark.svg
+++ b/docs/images/guides/layout/guideTitleLegendPosition_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -344,7 +344,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 330.6666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 330.6666666666667)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -590,7 +590,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="330.6666666666667">
             </rect>
           </clipPath>
@@ -782,6 +782,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleSetColorsForTitleSubtitleCaption.svg b/docs/images/guides/layout/guideTitleSetColorsForTitleSubtitleCaption.svg
index 141e92a3b..44a3829cb 100644
--- a/docs/images/guides/layout/guideTitleSetColorsForTitleSubtitleCaption.svg
+++ b/docs/images/guides/layout/guideTitleSetColorsForTitleSubtitleCaption.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #5470c6;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #ee6666;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #006400;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 41.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 376.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 376.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="376.0">
             </rect>
           </clipPath>
@@ -622,6 +622,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleSetColorsForTitleSubtitleCaption_dark.svg b/docs/images/guides/layout/guideTitleSetColorsForTitleSubtitleCaption_dark.svg
index 751cc4d0d..8f4ac3bd1 100644
--- a/docs/images/guides/layout/guideTitleSetColorsForTitleSubtitleCaption_dark.svg
+++ b/docs/images/guides/layout/guideTitleSetColorsForTitleSubtitleCaption_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #5470c6;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #ee6666;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #006400;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 41.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 376.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 376.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="376.0">
             </rect>
           </clipPath>
@@ -622,6 +622,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleSetTitle1.svg b/docs/images/guides/layout/guideTitleSetTitle1.svg
index 776ff1e9f..bee3e22bc 100644
--- a/docs/images/guides/layout/guideTitleSetTitle1.svg
+++ b/docs/images/guides/layout/guideTitleSetTitle1.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 408.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -415,7 +415,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="408.0">
             </rect>
           </clipPath>
@@ -612,6 +612,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleSetTitle1_dark.svg b/docs/images/guides/layout/guideTitleSetTitle1_dark.svg
index dc73ca5a0..f05acb506 100644
--- a/docs/images/guides/layout/guideTitleSetTitle1_dark.svg
+++ b/docs/images/guides/layout/guideTitleSetTitle1_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 408.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="408.0">
             </rect>
           </clipPath>
@@ -612,6 +612,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleSetTitle2.svg b/docs/images/guides/layout/guideTitleSetTitle2.svg
index beeb5c282..28e28a93e 100644
--- a/docs/images/guides/layout/guideTitleSetTitle2.svg
+++ b/docs/images/guides/layout/guideTitleSetTitle2.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 408.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -415,7 +415,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="408.0">
             </rect>
           </clipPath>
@@ -612,6 +612,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleSetTitle2_dark.svg b/docs/images/guides/layout/guideTitleSetTitle2_dark.svg
index 3939da18a..078b9b090 100644
--- a/docs/images/guides/layout/guideTitleSetTitle2_dark.svg
+++ b/docs/images/guides/layout/guideTitleSetTitle2_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 408.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="408.0">
             </rect>
           </clipPath>
@@ -612,6 +612,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleSetTitleAndSubtitle.svg b/docs/images/guides/layout/guideTitleSetTitleAndSubtitle.svg
index edaa1bfe7..1745ebd35 100644
--- a/docs/images/guides/layout/guideTitleSetTitleAndSubtitle.svg
+++ b/docs/images/guides/layout/guideTitleSetTitleAndSubtitle.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 41.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 389.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 389.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -415,7 +415,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="389.0">
             </rect>
           </clipPath>
@@ -617,6 +617,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleSetTitleAndSubtitle_dark.svg b/docs/images/guides/layout/guideTitleSetTitleAndSubtitle_dark.svg
index bcc8e7238..2ade558c1 100644
--- a/docs/images/guides/layout/guideTitleSetTitleAndSubtitle_dark.svg
+++ b/docs/images/guides/layout/guideTitleSetTitleAndSubtitle_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 41.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 389.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 389.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="389.0">
             </rect>
           </clipPath>
@@ -617,6 +617,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleSetTitleSubtitleCaption.svg b/docs/images/guides/layout/guideTitleSetTitleSubtitleCaption.svg
index b1105c964..a3c55c7c4 100644
--- a/docs/images/guides/layout/guideTitleSetTitleSubtitleCaption.svg
+++ b/docs/images/guides/layout/guideTitleSetTitleSubtitleCaption.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 41.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 376.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 376.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -415,7 +415,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="376.0">
             </rect>
           </clipPath>
@@ -622,6 +622,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleSetTitleSubtitleCaption_dark.svg b/docs/images/guides/layout/guideTitleSetTitleSubtitleCaption_dark.svg
index 82585d3b4..45ae46733 100644
--- a/docs/images/guides/layout/guideTitleSetTitleSubtitleCaption_dark.svg
+++ b/docs/images/guides/layout/guideTitleSetTitleSubtitleCaption_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 41.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 376.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 376.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="376.0">
             </rect>
           </clipPath>
@@ -622,6 +622,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleTypeOfLegend.svg b/docs/images/guides/layout/guideTitleTypeOfLegend.svg
index 3be45ae0a..ab497b866 100644
--- a/docs/images/guides/layout/guideTitleTypeOfLegend.svg
+++ b/docs/images/guides/layout/guideTitleTypeOfLegend.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -344,7 +344,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 284.6666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 284.6666666666667)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -590,7 +590,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="284.6666666666667">
             </rect>
           </clipPath>
@@ -788,6 +788,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/layout/guideTitleTypeOfLegend_dark.svg b/docs/images/guides/layout/guideTitleTypeOfLegend_dark.svg
index 841c0fcd3..3f046ea08 100644
--- a/docs/images/guides/layout/guideTitleTypeOfLegend_dark.svg
+++ b/docs/images/guides/layout/guideTitleTypeOfLegend_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -344,7 +344,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 284.6666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 284.6666666666667)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -590,7 +590,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="284.6666666666667">
             </rect>
           </clipPath>
@@ -788,6 +788,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideAnscombesQuartetPlot.svg b/docs/images/guides/multiplot/guideAnscombesQuartetPlot.svg
index b543632c8..91c8e87af 100644
--- a/docs/images/guides/multiplot/guideAnscombesQuartetPlot.svg
+++ b/docs/images/guides/multiplot/guideAnscombesQuartetPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-text {
+#_sample_helper_static_id_prefix_9 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-title {
+#_sample_helper_static_id_prefix_9 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-label {
+#_sample_helper_static_id_prefix_9 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -163,7 +163,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (291.1443899891293, 188.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (291.1443899891293, 188.0)]">
         <g transform="translate(17.961210910936405 19.0 ) ">
           <g>
             <g>
@@ -190,13 +190,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="19.0" width="291.1443899891293" height="188.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="19.0" width="291.1443899891293" height="188.0">
             </rect>
           </clipPath>
@@ -280,7 +280,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (319.1056009000657, 19.0), (291.1443899891293, 188.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (319.1056009000657, 19.0), (291.1443899891293, 188.0)]">
         <g transform="translate(319.1056009000657 19.0 ) ">
           <g>
             <g>
@@ -307,13 +307,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="319.1056009000657" y="19.0" width="291.1443899891293" height="188.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="319.1056009000657" y="19.0" width="291.1443899891293" height="188.0">
             </rect>
           </clipPath>
@@ -362,7 +362,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (17.961210910936405, 236.0), (291.1443899891293, 188.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (17.961210910936405, 236.0), (291.1443899891293, 188.0)]">
         <g transform="translate(17.961210910936405 236.0 ) ">
           <g>
             <g>
@@ -389,13 +389,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="17.961210910936405" y="236.0" width="291.1443899891293" height="188.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx6">
+          <clipPath id="_sample_helper_static_id_prefix_6">
             <rect x="17.961210910936405" y="236.0" width="291.1443899891293" height="188.0">
             </rect>
           </clipPath>
@@ -526,7 +526,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (319.1056009000657, 236.0), (291.1443899891293, 188.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (319.1056009000657, 236.0), (291.1443899891293, 188.0)]">
         <g transform="translate(319.1056009000657 236.0 ) ">
           <g>
             <g>
@@ -553,13 +553,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx7">
+          <clipPath id="_sample_helper_static_id_prefix_7">
             <rect x="319.1056009000657" y="236.0" width="291.1443899891293" height="188.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx8">
+          <clipPath id="_sample_helper_static_id_prefix_8">
             <rect x="319.1056009000657" y="236.0" width="291.1443899891293" height="188.0">
             </rect>
           </clipPath>
@@ -714,6 +714,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx9">
+  <g id="_sample_helper_static_id_prefix_9">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideAnscombesQuartetPlot_dark.svg b/docs/images/guides/multiplot/guideAnscombesQuartetPlot_dark.svg
index 0eab269a8..cf108355c 100644
--- a/docs/images/guides/multiplot/guideAnscombesQuartetPlot_dark.svg
+++ b/docs/images/guides/multiplot/guideAnscombesQuartetPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-text {
+#_sample_helper_static_id_prefix_9 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-title {
+#_sample_helper_static_id_prefix_9 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-label {
+#_sample_helper_static_id_prefix_9 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -202,7 +202,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (291.1443899891293, 188.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (291.1443899891293, 188.0)]">
         <g transform="translate(17.961210910936405 19.0 ) ">
           <g>
             <g>
@@ -229,13 +229,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="19.0" width="291.1443899891293" height="188.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="19.0" width="291.1443899891293" height="188.0">
             </rect>
           </clipPath>
@@ -284,7 +284,7 @@ font-size: 13.0px;
         <g transform="translate(319.1056009000657 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (319.1056009000657, 19.0), (291.1443899891293, 188.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (319.1056009000657, 19.0), (291.1443899891293, 188.0)]">
         <g transform="translate(319.1056009000657 19.0 ) ">
           <g>
             <g>
@@ -311,13 +311,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="319.1056009000657" y="19.0" width="291.1443899891293" height="188.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="319.1056009000657" y="19.0" width="291.1443899891293" height="188.0">
             </rect>
           </clipPath>
@@ -448,7 +448,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (17.961210910936405, 236.0), (291.1443899891293, 188.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (17.961210910936405, 236.0), (291.1443899891293, 188.0)]">
         <g transform="translate(17.961210910936405 236.0 ) ">
           <g>
             <g>
@@ -475,13 +475,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="17.961210910936405" y="236.0" width="291.1443899891293" height="188.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx6">
+          <clipPath id="_sample_helper_static_id_prefix_6">
             <rect x="17.961210910936405" y="236.0" width="291.1443899891293" height="188.0">
             </rect>
           </clipPath>
@@ -577,7 +577,7 @@ font-size: 13.0px;
         <g transform="translate(319.1056009000657 236.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (319.1056009000657, 236.0), (291.1443899891293, 188.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (319.1056009000657, 236.0), (291.1443899891293, 188.0)]">
         <g transform="translate(319.1056009000657 236.0 ) ">
           <g>
             <g>
@@ -604,13 +604,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx7">
+          <clipPath id="_sample_helper_static_id_prefix_7">
             <rect x="319.1056009000657" y="236.0" width="291.1443899891293" height="188.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx8">
+          <clipPath id="_sample_helper_static_id_prefix_8">
             <rect x="319.1056009000657" y="236.0" width="291.1443899891293" height="188.0">
             </rect>
           </clipPath>
@@ -714,6 +714,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx9">
+  <g id="_sample_helper_static_id_prefix_9">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideBunchCombineWithStyles.svg b/docs/images/guides/multiplot/guideBunchCombineWithStyles.svg
index c96c0993b..9f0af5cb7 100644
--- a/docs/images/guides/multiplot/guideBunchCombineWithStyles.svg
+++ b/docs/images/guides/multiplot/guideBunchCombineWithStyles.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="533.3333333333334" width="800.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 521.3333333333334 L788.0 521.3333333333334 L788.0 0.0 Z">
       </path>
       <g transform="translate(21.0 6.0 ) ">
@@ -474,7 +474,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (743.0387890890636, 494.33333333333337)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (743.0387890890636, 494.33333333333337)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -522,7 +522,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.961210910936405" y="0.0" width="743.0387890890636" height="494.33333333333337">
               </rect>
             </clipPath>
@@ -539,7 +539,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 521.3333333333334 L788.0 521.3333333333334 L788.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="394.0" height="260.6666666666667" x="400.0" y="266.6666666666667">
@@ -554,117 +554,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -673,7 +673,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 260.6666666666667 L394.0 260.6666666666667 L394.0 0.0 Z">
       </path>
       <g transform="translate(21.0 6.0 ) ">
@@ -751,7 +751,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (349.0387890890636, 233.66666666666669)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (349.0387890890636, 233.66666666666669)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1163,7 +1163,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.961210910936405" y="0.0" width="349.0387890890636" height="233.66666666666669">
               </rect>
             </clipPath>
@@ -1185,7 +1185,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 260.6666666666667 L394.0 260.6666666666667 L394.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideBunchCombineWithStyles_dark.svg b/docs/images/guides/multiplot/guideBunchCombineWithStyles_dark.svg
index b285be557..48a69a09b 100644
--- a/docs/images/guides/multiplot/guideBunchCombineWithStyles_dark.svg
+++ b/docs/images/guides/multiplot/guideBunchCombineWithStyles_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="533.3333333333334" width="800.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 521.3333333333334 L788.0 521.3333333333334 L788.0 0.0 Z">
       </path>
       <g transform="translate(21.0 6.0 ) ">
@@ -474,7 +474,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (743.0387890890636, 494.33333333333337)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (743.0387890890636, 494.33333333333337)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -522,7 +522,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.961210910936405" y="0.0" width="743.0387890890636" height="494.33333333333337">
               </rect>
             </clipPath>
@@ -539,7 +539,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 521.3333333333334 L788.0 521.3333333333334 L788.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="394.0" height="260.6666666666667" x="400.0" y="266.6666666666667">
@@ -554,117 +554,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -673,7 +673,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 260.6666666666667 L394.0 260.6666666666667 L394.0 0.0 Z">
       </path>
       <g transform="translate(21.0 6.0 ) ">
@@ -751,7 +751,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (349.0387890890636, 233.66666666666669)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (349.0387890890636, 233.66666666666669)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1163,7 +1163,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.961210910936405" y="0.0" width="349.0387890890636" height="233.66666666666669">
               </rect>
             </clipPath>
@@ -1185,7 +1185,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 260.6666666666667 L394.0 260.6666666666667 L394.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideFacetsArrangeVertically.svg b/docs/images/guides/multiplot/guideFacetsArrangeVertically.svg
index 63cac276a..af734cf31 100644
--- a/docs/images/guides/multiplot/guideFacetsArrangeVertically.svg
+++ b/docs/images/guides/multiplot/guideFacetsArrangeVertically.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_10 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_10 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .tooltip-text {
+#_sample_helper_static_id_prefix_10 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .tooltip-title {
+#_sample_helper_static_id_prefix_10 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .tooltip-label {
+#_sample_helper_static_id_prefix_10 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M5.6843418860808015E-14 0.0 L5.6843418860808015E-14 470.00000000000006 L705.0 470.00000000000006 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.000000000000057 6.0 ) ">
@@ -183,7 +183,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 38.0), (176.60341755601183, 96.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 38.0), (176.60341755601183, 96.66666666666667)]">
         <g transform="translate(21.961210910936405 38.0 ) ">
           <g>
             <g>
@@ -201,7 +201,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="21.961210910936405" y="38.0" width="176.60341755601183" height="96.66666666666667">
             </rect>
           </clipPath>
@@ -259,7 +259,7 @@ font-size: 13.0px;
         <g transform="translate(208.56462846694825 38.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (208.56462846694825, 38.0), (176.60341755601183, 96.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (208.56462846694825, 38.0), (176.60341755601183, 96.66666666666667)]">
         <g transform="translate(208.56462846694825 38.0 ) ">
           <g>
             <g>
@@ -275,7 +275,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="208.56462846694825" y="38.0" width="176.60341755601183" height="96.66666666666667">
             </rect>
           </clipPath>
@@ -333,7 +333,7 @@ font-size: 13.0px;
         <g transform="translate(395.1680460229601 38.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (395.1680460229601, 38.0), (176.60341755601183, 96.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (395.1680460229601, 38.0), (176.60341755601183, 96.66666666666667)]">
         <g transform="translate(395.1680460229601 38.0 ) ">
           <g>
             <g>
@@ -448,7 +448,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="395.1680460229601" y="38.0" width="176.60341755601183" height="96.66666666666667">
             </rect>
           </clipPath>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (21.961210910936405, 182.66666666666669), (176.60341755601183, 96.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (21.961210910936405, 182.66666666666669), (176.60341755601183, 96.66666666666667)]">
         <g transform="translate(21.961210910936405 182.66666666666669 ) ">
           <g>
             <g>
@@ -605,7 +605,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="21.961210910936405" y="182.66666666666669" width="176.60341755601183" height="96.66666666666667">
             </rect>
           </clipPath>
@@ -663,7 +663,7 @@ font-size: 13.0px;
         <g transform="translate(208.56462846694825 182.66666666666669 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (208.56462846694825, 182.66666666666669), (176.60341755601183, 96.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (208.56462846694825, 182.66666666666669), (176.60341755601183, 96.66666666666667)]">
         <g transform="translate(208.56462846694825 182.66666666666669 ) ">
           <g>
             <g>
@@ -678,7 +678,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="208.56462846694825" y="182.66666666666669" width="176.60341755601183" height="96.66666666666667">
             </rect>
           </clipPath>
@@ -736,7 +736,7 @@ font-size: 13.0px;
         <g transform="translate(395.1680460229601 182.66666666666669 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (395.1680460229601, 182.66666666666669), (176.60341755601183, 96.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (395.1680460229601, 182.66666666666669), (176.60341755601183, 96.66666666666667)]">
         <g transform="translate(395.1680460229601 182.66666666666669 ) ">
           <g>
             <g>
@@ -821,7 +821,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx6">
+          <clipPath id="_sample_helper_static_id_prefix_6">
             <rect x="395.1680460229601" y="182.66666666666669" width="176.60341755601183" height="96.66666666666667">
             </rect>
           </clipPath>
@@ -915,7 +915,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (21.961210910936405, 327.33333333333337), (176.60341755601183, 96.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (21.961210910936405, 327.33333333333337), (176.60341755601183, 96.66666666666667)]">
         <g transform="translate(21.961210910936405 327.33333333333337 ) ">
           <g>
             <g>
@@ -931,7 +931,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx7">
+          <clipPath id="_sample_helper_static_id_prefix_7">
             <rect x="21.961210910936405" y="327.33333333333337" width="176.60341755601183" height="96.66666666666667">
             </rect>
           </clipPath>
@@ -1007,7 +1007,7 @@ font-size: 13.0px;
         <g transform="translate(208.56462846694825 327.33333333333337 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (208.56462846694825, 327.33333333333337), (176.60341755601183, 96.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (208.56462846694825, 327.33333333333337), (176.60341755601183, 96.66666666666667)]">
         <g transform="translate(208.56462846694825 327.33333333333337 ) ">
           <g>
             <g>
@@ -1080,7 +1080,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx8">
+          <clipPath id="_sample_helper_static_id_prefix_8">
             <rect x="208.56462846694825" y="327.33333333333337" width="176.60341755601183" height="96.66666666666667">
             </rect>
           </clipPath>
@@ -1156,7 +1156,7 @@ font-size: 13.0px;
         <g transform="translate(395.1680460229601 327.33333333333337 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx9)" clip-bounds-jfx="[rect (395.1680460229601, 327.33333333333337), (176.60341755601183, 96.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_9)" clip-bounds-jfx="[rect (395.1680460229601, 327.33333333333337), (176.60341755601183, 96.66666666666667)]">
         <g transform="translate(395.1680460229601 327.33333333333337 ) ">
           <g>
             <g>
@@ -1237,7 +1237,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx9">
+          <clipPath id="_sample_helper_static_id_prefix_9">
             <rect x="395.1680460229601" y="327.33333333333337" width="176.60341755601183" height="96.66666666666667">
             </rect>
           </clipPath>
@@ -1342,6 +1342,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M5.6843418860808015E-14 0.0 L5.6843418860808015E-14 470.00000000000006 L705.0 470.00000000000006 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx10">
+  <g id="_sample_helper_static_id_prefix_10">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideFacetsArrangeVertically_dark.svg b/docs/images/guides/multiplot/guideFacetsArrangeVertically_dark.svg
index 717e6cc73..e01f80ec6 100644
--- a/docs/images/guides/multiplot/guideFacetsArrangeVertically_dark.svg
+++ b/docs/images/guides/multiplot/guideFacetsArrangeVertically_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_10 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_10 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .tooltip-text {
+#_sample_helper_static_id_prefix_10 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .tooltip-title {
+#_sample_helper_static_id_prefix_10 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .tooltip-label {
+#_sample_helper_static_id_prefix_10 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M5.6843418860808015E-14 0.0 L5.6843418860808015E-14 470.00000000000006 L705.0 470.00000000000006 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.000000000000057 6.0 ) ">
@@ -183,7 +183,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 38.0), (176.60341755601183, 96.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 38.0), (176.60341755601183, 96.66666666666667)]">
         <g transform="translate(21.961210910936405 38.0 ) ">
           <g>
             <g>
@@ -201,7 +201,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="21.961210910936405" y="38.0" width="176.60341755601183" height="96.66666666666667">
             </rect>
           </clipPath>
@@ -259,7 +259,7 @@ font-size: 13.0px;
         <g transform="translate(208.56462846694825 38.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (208.56462846694825, 38.0), (176.60341755601183, 96.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (208.56462846694825, 38.0), (176.60341755601183, 96.66666666666667)]">
         <g transform="translate(208.56462846694825 38.0 ) ">
           <g>
             <g>
@@ -275,7 +275,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="208.56462846694825" y="38.0" width="176.60341755601183" height="96.66666666666667">
             </rect>
           </clipPath>
@@ -333,7 +333,7 @@ font-size: 13.0px;
         <g transform="translate(395.1680460229601 38.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (395.1680460229601, 38.0), (176.60341755601183, 96.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (395.1680460229601, 38.0), (176.60341755601183, 96.66666666666667)]">
         <g transform="translate(395.1680460229601 38.0 ) ">
           <g>
             <g>
@@ -448,7 +448,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="395.1680460229601" y="38.0" width="176.60341755601183" height="96.66666666666667">
             </rect>
           </clipPath>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (21.961210910936405, 182.66666666666669), (176.60341755601183, 96.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (21.961210910936405, 182.66666666666669), (176.60341755601183, 96.66666666666667)]">
         <g transform="translate(21.961210910936405 182.66666666666669 ) ">
           <g>
             <g>
@@ -605,7 +605,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="21.961210910936405" y="182.66666666666669" width="176.60341755601183" height="96.66666666666667">
             </rect>
           </clipPath>
@@ -663,7 +663,7 @@ font-size: 13.0px;
         <g transform="translate(208.56462846694825 182.66666666666669 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (208.56462846694825, 182.66666666666669), (176.60341755601183, 96.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (208.56462846694825, 182.66666666666669), (176.60341755601183, 96.66666666666667)]">
         <g transform="translate(208.56462846694825 182.66666666666669 ) ">
           <g>
             <g>
@@ -678,7 +678,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="208.56462846694825" y="182.66666666666669" width="176.60341755601183" height="96.66666666666667">
             </rect>
           </clipPath>
@@ -736,7 +736,7 @@ font-size: 13.0px;
         <g transform="translate(395.1680460229601 182.66666666666669 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (395.1680460229601, 182.66666666666669), (176.60341755601183, 96.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (395.1680460229601, 182.66666666666669), (176.60341755601183, 96.66666666666667)]">
         <g transform="translate(395.1680460229601 182.66666666666669 ) ">
           <g>
             <g>
@@ -821,7 +821,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx6">
+          <clipPath id="_sample_helper_static_id_prefix_6">
             <rect x="395.1680460229601" y="182.66666666666669" width="176.60341755601183" height="96.66666666666667">
             </rect>
           </clipPath>
@@ -915,7 +915,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (21.961210910936405, 327.33333333333337), (176.60341755601183, 96.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (21.961210910936405, 327.33333333333337), (176.60341755601183, 96.66666666666667)]">
         <g transform="translate(21.961210910936405 327.33333333333337 ) ">
           <g>
             <g>
@@ -931,7 +931,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx7">
+          <clipPath id="_sample_helper_static_id_prefix_7">
             <rect x="21.961210910936405" y="327.33333333333337" width="176.60341755601183" height="96.66666666666667">
             </rect>
           </clipPath>
@@ -1007,7 +1007,7 @@ font-size: 13.0px;
         <g transform="translate(208.56462846694825 327.33333333333337 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (208.56462846694825, 327.33333333333337), (176.60341755601183, 96.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (208.56462846694825, 327.33333333333337), (176.60341755601183, 96.66666666666667)]">
         <g transform="translate(208.56462846694825 327.33333333333337 ) ">
           <g>
             <g>
@@ -1080,7 +1080,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx8">
+          <clipPath id="_sample_helper_static_id_prefix_8">
             <rect x="208.56462846694825" y="327.33333333333337" width="176.60341755601183" height="96.66666666666667">
             </rect>
           </clipPath>
@@ -1156,7 +1156,7 @@ font-size: 13.0px;
         <g transform="translate(395.1680460229601 327.33333333333337 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx9)" clip-bounds-jfx="[rect (395.1680460229601, 327.33333333333337), (176.60341755601183, 96.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_9)" clip-bounds-jfx="[rect (395.1680460229601, 327.33333333333337), (176.60341755601183, 96.66666666666667)]">
         <g transform="translate(395.1680460229601 327.33333333333337 ) ">
           <g>
             <g>
@@ -1237,7 +1237,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx9">
+          <clipPath id="_sample_helper_static_id_prefix_9">
             <rect x="395.1680460229601" y="327.33333333333337" width="176.60341755601183" height="96.66666666666667">
             </rect>
           </clipPath>
@@ -1342,6 +1342,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M5.6843418860808015E-14 0.0 L5.6843418860808015E-14 470.00000000000006 L705.0 470.00000000000006 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx10">
+  <g id="_sample_helper_static_id_prefix_10">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideFacetsGridXPlot.svg b/docs/images/guides/multiplot/guideFacetsGridXPlot.svg
index 43550a7e3..266386b8f 100644
--- a/docs/images/guides/multiplot/guideFacetsGridXPlot.svg
+++ b/docs/images/guides/multiplot/guideFacetsGridXPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M5.6843418860808015E-14 0.0 L5.6843418860808015E-14 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.000000000000057 6.0 ) ">
@@ -266,7 +266,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 19.0), (101.9620505336071, 405.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 19.0), (101.9620505336071, 405.0)]">
         <g transform="translate(21.961210910936405 19.0 ) ">
           <g>
             <g>
@@ -282,7 +282,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="21.961210910936405" y="19.0" width="101.9620505336071" height="405.0">
             </rect>
           </clipPath>
@@ -362,7 +362,7 @@ font-size: 13.0px;
         <g transform="translate(133.9232614445435 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (133.9232614445435, 19.0), (101.9620505336071, 405.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (133.9232614445435, 19.0), (101.9620505336071, 405.0)]">
         <g transform="translate(133.9232614445435 19.0 ) ">
           <g>
             <g>
@@ -573,7 +573,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="133.9232614445435" y="19.0" width="101.9620505336071" height="405.0">
             </rect>
           </clipPath>
@@ -653,7 +653,7 @@ font-size: 13.0px;
         <g transform="translate(245.88531197815058 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (245.88531197815058, 19.0), (101.9620505336071, 405.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (245.88531197815058, 19.0), (101.9620505336071, 405.0)]">
         <g transform="translate(245.88531197815058 19.0 ) ">
           <g>
             <g>
@@ -668,7 +668,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="245.88531197815058" y="19.0" width="101.9620505336071" height="405.0">
             </rect>
           </clipPath>
@@ -748,7 +748,7 @@ font-size: 13.0px;
         <g transform="translate(357.8473625117577 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (357.8473625117577, 19.0), (101.9620505336071, 405.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (357.8473625117577, 19.0), (101.9620505336071, 405.0)]">
         <g transform="translate(357.8473625117577 19.0 ) ">
           <g>
             <g>
@@ -843,7 +843,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="357.8473625117577" y="19.0" width="101.9620505336071" height="405.0">
             </rect>
           </clipPath>
@@ -923,7 +923,7 @@ font-size: 13.0px;
         <g transform="translate(469.8094130453648 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (469.8094130453648, 19.0), (101.9620505336071, 405.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (469.8094130453648, 19.0), (101.9620505336071, 405.0)]">
         <g transform="translate(469.8094130453648 19.0 ) ">
           <g>
             <g>
@@ -1038,7 +1038,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="469.8094130453648" y="19.0" width="101.9620505336071" height="405.0">
             </rect>
           </clipPath>
@@ -1136,6 +1136,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M5.6843418860808015E-14 0.0 L5.6843418860808015E-14 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx6">
+  <g id="_sample_helper_static_id_prefix_6">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideFacetsGridXPlot_dark.svg b/docs/images/guides/multiplot/guideFacetsGridXPlot_dark.svg
index f99f3c21e..6f95b7a0f 100644
--- a/docs/images/guides/multiplot/guideFacetsGridXPlot_dark.svg
+++ b/docs/images/guides/multiplot/guideFacetsGridXPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M5.6843418860808015E-14 0.0 L5.6843418860808015E-14 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.000000000000057 6.0 ) ">
@@ -266,7 +266,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 19.0), (101.9620505336071, 405.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 19.0), (101.9620505336071, 405.0)]">
         <g transform="translate(21.961210910936405 19.0 ) ">
           <g>
             <g>
@@ -282,7 +282,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="21.961210910936405" y="19.0" width="101.9620505336071" height="405.0">
             </rect>
           </clipPath>
@@ -362,7 +362,7 @@ font-size: 13.0px;
         <g transform="translate(133.9232614445435 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (133.9232614445435, 19.0), (101.9620505336071, 405.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (133.9232614445435, 19.0), (101.9620505336071, 405.0)]">
         <g transform="translate(133.9232614445435 19.0 ) ">
           <g>
             <g>
@@ -573,7 +573,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="133.9232614445435" y="19.0" width="101.9620505336071" height="405.0">
             </rect>
           </clipPath>
@@ -653,7 +653,7 @@ font-size: 13.0px;
         <g transform="translate(245.88531197815058 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (245.88531197815058, 19.0), (101.9620505336071, 405.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (245.88531197815058, 19.0), (101.9620505336071, 405.0)]">
         <g transform="translate(245.88531197815058 19.0 ) ">
           <g>
             <g>
@@ -668,7 +668,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="245.88531197815058" y="19.0" width="101.9620505336071" height="405.0">
             </rect>
           </clipPath>
@@ -748,7 +748,7 @@ font-size: 13.0px;
         <g transform="translate(357.8473625117577 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (357.8473625117577, 19.0), (101.9620505336071, 405.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (357.8473625117577, 19.0), (101.9620505336071, 405.0)]">
         <g transform="translate(357.8473625117577 19.0 ) ">
           <g>
             <g>
@@ -843,7 +843,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="357.8473625117577" y="19.0" width="101.9620505336071" height="405.0">
             </rect>
           </clipPath>
@@ -923,7 +923,7 @@ font-size: 13.0px;
         <g transform="translate(469.8094130453648 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (469.8094130453648, 19.0), (101.9620505336071, 405.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (469.8094130453648, 19.0), (101.9620505336071, 405.0)]">
         <g transform="translate(469.8094130453648 19.0 ) ">
           <g>
             <g>
@@ -1038,7 +1038,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="469.8094130453648" y="19.0" width="101.9620505336071" height="405.0">
             </rect>
           </clipPath>
@@ -1136,6 +1136,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M5.6843418860808015E-14 0.0 L5.6843418860808015E-14 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx6">
+  <g id="_sample_helper_static_id_prefix_6">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideFacetsScatterPlotByHorsePower.svg b/docs/images/guides/multiplot/guideFacetsScatterPlotByHorsePower.svg
index 57b849072..9a6ab16ab 100644
--- a/docs/images/guides/multiplot/guideFacetsScatterPlotByHorsePower.svg
+++ b/docs/images/guides/multiplot/guideFacetsScatterPlotByHorsePower.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 308.0 L705.0 308.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -331,7 +331,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (549.8102526680356, 262.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (549.8102526680356, 262.0)]">
         <g transform="translate(21.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -735,7 +735,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="21.961210910936405" y="0.0" width="549.8102526680356" height="262.0">
             </rect>
           </clipPath>
@@ -826,6 +826,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 308.0 L705.0 308.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideFacetsScatterPlotByHorsePower_dark.svg b/docs/images/guides/multiplot/guideFacetsScatterPlotByHorsePower_dark.svg
index 19e8e3a1a..fb6c60e0c 100644
--- a/docs/images/guides/multiplot/guideFacetsScatterPlotByHorsePower_dark.svg
+++ b/docs/images/guides/multiplot/guideFacetsScatterPlotByHorsePower_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 308.0 L705.0 308.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -331,7 +331,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (549.8102526680356, 262.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (549.8102526680356, 262.0)]">
         <g transform="translate(21.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -735,7 +735,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="21.961210910936405" y="0.0" width="549.8102526680356" height="262.0">
             </rect>
           </clipPath>
@@ -826,6 +826,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 308.0 L705.0 308.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideFacetsTwoPlotsGrid.svg b/docs/images/guides/multiplot/guideFacetsTwoPlotsGrid.svg
index 43992a642..bb7413e60 100644
--- a/docs/images/guides/multiplot/guideFacetsTwoPlotsGrid.svg
+++ b/docs/images/guides/multiplot/guideFacetsTwoPlotsGrid.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_16 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_16 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .tooltip-text {
+#_sample_helper_static_id_prefix_16 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .tooltip-title {
+#_sample_helper_static_id_prefix_16 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .tooltip-label {
+#_sample_helper_static_id_prefix_16 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M5.6843418860808015E-14 0.0 L5.6843418860808015E-14 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.000000000000057 6.0 ) ">
@@ -177,7 +177,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 19.0), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 19.0), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(21.961210910936405 19.0 ) ">
           <g>
             <g>
@@ -193,7 +193,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="21.961210910936405" y="19.0" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -238,7 +238,7 @@ font-size: 13.0px;
         <g transform="translate(130.12326144454352 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (130.12326144454352, 19.0), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (130.12326144454352, 19.0), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(130.12326144454352 19.0 ) ">
           <g>
             <g>
@@ -319,7 +319,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="130.12326144454352" y="19.0" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -364,7 +364,7 @@ font-size: 13.0px;
         <g transform="translate(238.28531197815062 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (238.28531197815062, 19.0), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (238.28531197815062, 19.0), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(238.28531197815062 19.0 ) ">
           <g>
             <g>
@@ -376,7 +376,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="238.28531197815062" y="19.0" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -421,7 +421,7 @@ font-size: 13.0px;
         <g transform="translate(346.4473625117577 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (346.4473625117577, 19.0), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (346.4473625117577, 19.0), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(346.4473625117577 19.0 ) ">
           <g>
             <g>
@@ -439,7 +439,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="346.4473625117577" y="19.0" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -484,7 +484,7 @@ font-size: 13.0px;
         <g transform="translate(454.6094130453648 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (454.6094130453648, 19.0), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (454.6094130453648, 19.0), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(454.6094130453648 19.0 ) ">
           <g>
             <g>
@@ -496,7 +496,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="454.6094130453648" y="19.0" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -566,7 +566,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (21.961210910936405, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (21.961210910936405, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(21.961210910936405 157.33333333333334 ) ">
           <g>
             <g>
@@ -578,7 +578,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx6">
+          <clipPath id="_sample_helper_static_id_prefix_6">
             <rect x="21.961210910936405" y="157.33333333333334" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -616,7 +616,7 @@ font-size: 13.0px;
         <g transform="translate(130.12326144454352 157.33333333333334 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (130.12326144454352, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (130.12326144454352, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(130.12326144454352 157.33333333333334 ) ">
           <g>
             <g>
@@ -689,7 +689,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx7">
+          <clipPath id="_sample_helper_static_id_prefix_7">
             <rect x="130.12326144454352" y="157.33333333333334" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -727,7 +727,7 @@ font-size: 13.0px;
         <g transform="translate(238.28531197815062 157.33333333333334 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (238.28531197815062, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (238.28531197815062, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(238.28531197815062 157.33333333333334 ) ">
           <g>
             <g>
@@ -742,7 +742,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx8">
+          <clipPath id="_sample_helper_static_id_prefix_8">
             <rect x="238.28531197815062" y="157.33333333333334" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -780,7 +780,7 @@ font-size: 13.0px;
         <g transform="translate(346.4473625117577 157.33333333333334 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx9)" clip-bounds-jfx="[rect (346.4473625117577, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_9)" clip-bounds-jfx="[rect (346.4473625117577, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(346.4473625117577 157.33333333333334 ) ">
           <g>
             <g>
@@ -796,7 +796,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx9">
+          <clipPath id="_sample_helper_static_id_prefix_9">
             <rect x="346.4473625117577" y="157.33333333333334" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -834,7 +834,7 @@ font-size: 13.0px;
         <g transform="translate(454.6094130453648 157.33333333333334 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx10)" clip-bounds-jfx="[rect (454.6094130453648, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_10)" clip-bounds-jfx="[rect (454.6094130453648, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(454.6094130453648 157.33333333333334 ) ">
           <g>
             <g>
@@ -846,7 +846,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx10">
+          <clipPath id="_sample_helper_static_id_prefix_10">
             <rect x="454.6094130453648" y="157.33333333333334" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -918,7 +918,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (21.961210910936405, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (21.961210910936405, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(21.961210910936405 295.6666666666667 ) ">
           <g>
             <g>
@@ -930,7 +930,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx11">
+          <clipPath id="_sample_helper_static_id_prefix_11">
             <rect x="21.961210910936405" y="295.6666666666667" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -977,7 +977,7 @@ font-size: 13.0px;
         <g transform="translate(130.12326144454352 295.6666666666667 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx12)" clip-bounds-jfx="[rect (130.12326144454352, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_12)" clip-bounds-jfx="[rect (130.12326144454352, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(130.12326144454352 295.6666666666667 ) ">
           <g>
             <g>
@@ -1058,7 +1058,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx12">
+          <clipPath id="_sample_helper_static_id_prefix_12">
             <rect x="130.12326144454352" y="295.6666666666667" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -1105,7 +1105,7 @@ font-size: 13.0px;
         <g transform="translate(238.28531197815062 295.6666666666667 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx13)" clip-bounds-jfx="[rect (238.28531197815062, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_13)" clip-bounds-jfx="[rect (238.28531197815062, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(238.28531197815062 295.6666666666667 ) ">
           <g>
             <g>
@@ -1117,7 +1117,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx13">
+          <clipPath id="_sample_helper_static_id_prefix_13">
             <rect x="238.28531197815062" y="295.6666666666667" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -1164,7 +1164,7 @@ font-size: 13.0px;
         <g transform="translate(346.4473625117577 295.6666666666667 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (346.4473625117577, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (346.4473625117577, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(346.4473625117577 295.6666666666667 ) ">
           <g>
             <g>
@@ -1249,7 +1249,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx14">
+          <clipPath id="_sample_helper_static_id_prefix_14">
             <rect x="346.4473625117577" y="295.6666666666667" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -1296,7 +1296,7 @@ font-size: 13.0px;
         <g transform="translate(454.6094130453648 295.6666666666667 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx15)" clip-bounds-jfx="[rect (454.6094130453648, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_15)" clip-bounds-jfx="[rect (454.6094130453648, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(454.6094130453648 295.6666666666667 ) ">
           <g>
             <g>
@@ -1411,7 +1411,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx15">
+          <clipPath id="_sample_helper_static_id_prefix_15">
             <rect x="454.6094130453648" y="295.6666666666667" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -1509,6 +1509,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M5.6843418860808015E-14 0.0 L5.6843418860808015E-14 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx16">
+  <g id="_sample_helper_static_id_prefix_16">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideFacetsTwoPlotsGrid_dark.svg b/docs/images/guides/multiplot/guideFacetsTwoPlotsGrid_dark.svg
index 8d47a1ba7..86fba7181 100644
--- a/docs/images/guides/multiplot/guideFacetsTwoPlotsGrid_dark.svg
+++ b/docs/images/guides/multiplot/guideFacetsTwoPlotsGrid_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_16 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_16 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .tooltip-text {
+#_sample_helper_static_id_prefix_16 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .tooltip-title {
+#_sample_helper_static_id_prefix_16 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .tooltip-label {
+#_sample_helper_static_id_prefix_16 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M5.6843418860808015E-14 0.0 L5.6843418860808015E-14 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.000000000000057 6.0 ) ">
@@ -177,7 +177,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 19.0), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 19.0), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(21.961210910936405 19.0 ) ">
           <g>
             <g>
@@ -193,7 +193,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="21.961210910936405" y="19.0" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -238,7 +238,7 @@ font-size: 13.0px;
         <g transform="translate(130.12326144454352 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (130.12326144454352, 19.0), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (130.12326144454352, 19.0), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(130.12326144454352 19.0 ) ">
           <g>
             <g>
@@ -319,7 +319,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="130.12326144454352" y="19.0" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -364,7 +364,7 @@ font-size: 13.0px;
         <g transform="translate(238.28531197815062 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (238.28531197815062, 19.0), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (238.28531197815062, 19.0), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(238.28531197815062 19.0 ) ">
           <g>
             <g>
@@ -376,7 +376,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="238.28531197815062" y="19.0" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -421,7 +421,7 @@ font-size: 13.0px;
         <g transform="translate(346.4473625117577 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (346.4473625117577, 19.0), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (346.4473625117577, 19.0), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(346.4473625117577 19.0 ) ">
           <g>
             <g>
@@ -439,7 +439,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="346.4473625117577" y="19.0" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -484,7 +484,7 @@ font-size: 13.0px;
         <g transform="translate(454.6094130453648 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (454.6094130453648, 19.0), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (454.6094130453648, 19.0), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(454.6094130453648 19.0 ) ">
           <g>
             <g>
@@ -496,7 +496,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="454.6094130453648" y="19.0" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -566,7 +566,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (21.961210910936405, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (21.961210910936405, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(21.961210910936405 157.33333333333334 ) ">
           <g>
             <g>
@@ -578,7 +578,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx6">
+          <clipPath id="_sample_helper_static_id_prefix_6">
             <rect x="21.961210910936405" y="157.33333333333334" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -616,7 +616,7 @@ font-size: 13.0px;
         <g transform="translate(130.12326144454352 157.33333333333334 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (130.12326144454352, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (130.12326144454352, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(130.12326144454352 157.33333333333334 ) ">
           <g>
             <g>
@@ -689,7 +689,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx7">
+          <clipPath id="_sample_helper_static_id_prefix_7">
             <rect x="130.12326144454352" y="157.33333333333334" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -727,7 +727,7 @@ font-size: 13.0px;
         <g transform="translate(238.28531197815062 157.33333333333334 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (238.28531197815062, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (238.28531197815062, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(238.28531197815062 157.33333333333334 ) ">
           <g>
             <g>
@@ -742,7 +742,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx8">
+          <clipPath id="_sample_helper_static_id_prefix_8">
             <rect x="238.28531197815062" y="157.33333333333334" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -780,7 +780,7 @@ font-size: 13.0px;
         <g transform="translate(346.4473625117577 157.33333333333334 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx9)" clip-bounds-jfx="[rect (346.4473625117577, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_9)" clip-bounds-jfx="[rect (346.4473625117577, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(346.4473625117577 157.33333333333334 ) ">
           <g>
             <g>
@@ -796,7 +796,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx9">
+          <clipPath id="_sample_helper_static_id_prefix_9">
             <rect x="346.4473625117577" y="157.33333333333334" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -834,7 +834,7 @@ font-size: 13.0px;
         <g transform="translate(454.6094130453648 157.33333333333334 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx10)" clip-bounds-jfx="[rect (454.6094130453648, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_10)" clip-bounds-jfx="[rect (454.6094130453648, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(454.6094130453648 157.33333333333334 ) ">
           <g>
             <g>
@@ -846,7 +846,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx10">
+          <clipPath id="_sample_helper_static_id_prefix_10">
             <rect x="454.6094130453648" y="157.33333333333334" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -918,7 +918,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (21.961210910936405, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (21.961210910936405, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(21.961210910936405 295.6666666666667 ) ">
           <g>
             <g>
@@ -930,7 +930,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx11">
+          <clipPath id="_sample_helper_static_id_prefix_11">
             <rect x="21.961210910936405" y="295.6666666666667" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -977,7 +977,7 @@ font-size: 13.0px;
         <g transform="translate(130.12326144454352 295.6666666666667 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx12)" clip-bounds-jfx="[rect (130.12326144454352, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_12)" clip-bounds-jfx="[rect (130.12326144454352, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(130.12326144454352 295.6666666666667 ) ">
           <g>
             <g>
@@ -1058,7 +1058,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx12">
+          <clipPath id="_sample_helper_static_id_prefix_12">
             <rect x="130.12326144454352" y="295.6666666666667" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -1105,7 +1105,7 @@ font-size: 13.0px;
         <g transform="translate(238.28531197815062 295.6666666666667 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx13)" clip-bounds-jfx="[rect (238.28531197815062, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_13)" clip-bounds-jfx="[rect (238.28531197815062, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(238.28531197815062 295.6666666666667 ) ">
           <g>
             <g>
@@ -1117,7 +1117,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx13">
+          <clipPath id="_sample_helper_static_id_prefix_13">
             <rect x="238.28531197815062" y="295.6666666666667" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -1164,7 +1164,7 @@ font-size: 13.0px;
         <g transform="translate(346.4473625117577 295.6666666666667 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (346.4473625117577, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (346.4473625117577, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(346.4473625117577 295.6666666666667 ) ">
           <g>
             <g>
@@ -1249,7 +1249,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx14">
+          <clipPath id="_sample_helper_static_id_prefix_14">
             <rect x="346.4473625117577" y="295.6666666666667" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -1296,7 +1296,7 @@ font-size: 13.0px;
         <g transform="translate(454.6094130453648 295.6666666666667 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx15)" clip-bounds-jfx="[rect (454.6094130453648, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_15)" clip-bounds-jfx="[rect (454.6094130453648, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(454.6094130453648 295.6666666666667 ) ">
           <g>
             <g>
@@ -1411,7 +1411,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx15">
+          <clipPath id="_sample_helper_static_id_prefix_15">
             <rect x="454.6094130453648" y="295.6666666666667" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -1509,6 +1509,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M5.6843418860808015E-14 0.0 L5.6843418860808015E-14 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx16">
+  <g id="_sample_helper_static_id_prefix_16">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideFacetsWithFormattingAndSorting.svg b/docs/images/guides/multiplot/guideFacetsWithFormattingAndSorting.svg
index 266b2ffc1..5e75bd197 100644
--- a/docs/images/guides/multiplot/guideFacetsWithFormattingAndSorting.svg
+++ b/docs/images/guides/multiplot/guideFacetsWithFormattingAndSorting.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_16 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_16 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .tooltip-text {
+#_sample_helper_static_id_prefix_16 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .tooltip-title {
+#_sample_helper_static_id_prefix_16 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .tooltip-label {
+#_sample_helper_static_id_prefix_16 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M5.6843418860808015E-14 0.0 L5.6843418860808015E-14 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.000000000000057 6.0 ) ">
@@ -177,7 +177,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 19.0), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 19.0), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(21.961210910936405 19.0 ) ">
           <g>
             <g>
@@ -189,7 +189,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="21.961210910936405" y="19.0" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -234,7 +234,7 @@ font-size: 13.0px;
         <g transform="translate(130.12326144454352 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (130.12326144454352, 19.0), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (130.12326144454352, 19.0), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(130.12326144454352 19.0 ) ">
           <g>
             <g>
@@ -315,7 +315,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="130.12326144454352" y="19.0" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -360,7 +360,7 @@ font-size: 13.0px;
         <g transform="translate(238.28531197815062 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (238.28531197815062, 19.0), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (238.28531197815062, 19.0), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(238.28531197815062 19.0 ) ">
           <g>
             <g>
@@ -372,7 +372,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="238.28531197815062" y="19.0" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -417,7 +417,7 @@ font-size: 13.0px;
         <g transform="translate(346.4473625117577 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (346.4473625117577, 19.0), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (346.4473625117577, 19.0), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(346.4473625117577 19.0 ) ">
           <g>
             <g>
@@ -502,7 +502,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="346.4473625117577" y="19.0" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -547,7 +547,7 @@ font-size: 13.0px;
         <g transform="translate(454.6094130453648 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (454.6094130453648, 19.0), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (454.6094130453648, 19.0), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(454.6094130453648 19.0 ) ">
           <g>
             <g>
@@ -662,7 +662,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="454.6094130453648" y="19.0" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -732,7 +732,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (21.961210910936405, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (21.961210910936405, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(21.961210910936405 157.33333333333334 ) ">
           <g>
             <g>
@@ -744,7 +744,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx6">
+          <clipPath id="_sample_helper_static_id_prefix_6">
             <rect x="21.961210910936405" y="157.33333333333334" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -782,7 +782,7 @@ font-size: 13.0px;
         <g transform="translate(130.12326144454352 157.33333333333334 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (130.12326144454352, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (130.12326144454352, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(130.12326144454352 157.33333333333334 ) ">
           <g>
             <g>
@@ -855,7 +855,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx7">
+          <clipPath id="_sample_helper_static_id_prefix_7">
             <rect x="130.12326144454352" y="157.33333333333334" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -893,7 +893,7 @@ font-size: 13.0px;
         <g transform="translate(238.28531197815062 157.33333333333334 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (238.28531197815062, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (238.28531197815062, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(238.28531197815062 157.33333333333334 ) ">
           <g>
             <g>
@@ -908,7 +908,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx8">
+          <clipPath id="_sample_helper_static_id_prefix_8">
             <rect x="238.28531197815062" y="157.33333333333334" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -946,7 +946,7 @@ font-size: 13.0px;
         <g transform="translate(346.4473625117577 157.33333333333334 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx9)" clip-bounds-jfx="[rect (346.4473625117577, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_9)" clip-bounds-jfx="[rect (346.4473625117577, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(346.4473625117577 157.33333333333334 ) ">
           <g>
             <g>
@@ -962,7 +962,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx9">
+          <clipPath id="_sample_helper_static_id_prefix_9">
             <rect x="346.4473625117577" y="157.33333333333334" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -1000,7 +1000,7 @@ font-size: 13.0px;
         <g transform="translate(454.6094130453648 157.33333333333334 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx10)" clip-bounds-jfx="[rect (454.6094130453648, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_10)" clip-bounds-jfx="[rect (454.6094130453648, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(454.6094130453648 157.33333333333334 ) ">
           <g>
             <g>
@@ -1012,7 +1012,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx10">
+          <clipPath id="_sample_helper_static_id_prefix_10">
             <rect x="454.6094130453648" y="157.33333333333334" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -1084,7 +1084,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (21.961210910936405, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (21.961210910936405, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(21.961210910936405 295.6666666666667 ) ">
           <g>
             <g>
@@ -1100,7 +1100,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx11">
+          <clipPath id="_sample_helper_static_id_prefix_11">
             <rect x="21.961210910936405" y="295.6666666666667" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -1147,7 +1147,7 @@ font-size: 13.0px;
         <g transform="translate(130.12326144454352 295.6666666666667 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx12)" clip-bounds-jfx="[rect (130.12326144454352, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_12)" clip-bounds-jfx="[rect (130.12326144454352, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(130.12326144454352 295.6666666666667 ) ">
           <g>
             <g>
@@ -1228,7 +1228,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx12">
+          <clipPath id="_sample_helper_static_id_prefix_12">
             <rect x="130.12326144454352" y="295.6666666666667" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -1275,7 +1275,7 @@ font-size: 13.0px;
         <g transform="translate(238.28531197815062 295.6666666666667 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx13)" clip-bounds-jfx="[rect (238.28531197815062, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_13)" clip-bounds-jfx="[rect (238.28531197815062, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(238.28531197815062 295.6666666666667 ) ">
           <g>
             <g>
@@ -1287,7 +1287,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx13">
+          <clipPath id="_sample_helper_static_id_prefix_13">
             <rect x="238.28531197815062" y="295.6666666666667" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -1334,7 +1334,7 @@ font-size: 13.0px;
         <g transform="translate(346.4473625117577 295.6666666666667 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (346.4473625117577, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (346.4473625117577, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(346.4473625117577 295.6666666666667 ) ">
           <g>
             <g>
@@ -1352,7 +1352,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx14">
+          <clipPath id="_sample_helper_static_id_prefix_14">
             <rect x="346.4473625117577" y="295.6666666666667" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -1399,7 +1399,7 @@ font-size: 13.0px;
         <g transform="translate(454.6094130453648 295.6666666666667 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx15)" clip-bounds-jfx="[rect (454.6094130453648, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_15)" clip-bounds-jfx="[rect (454.6094130453648, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(454.6094130453648 295.6666666666667 ) ">
           <g>
             <g>
@@ -1411,7 +1411,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx15">
+          <clipPath id="_sample_helper_static_id_prefix_15">
             <rect x="454.6094130453648" y="295.6666666666667" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -1509,6 +1509,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M5.6843418860808015E-14 0.0 L5.6843418860808015E-14 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx16">
+  <g id="_sample_helper_static_id_prefix_16">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideFacetsWithFormattingAndSorting_dark.svg b/docs/images/guides/multiplot/guideFacetsWithFormattingAndSorting_dark.svg
index 15a04de3a..f4610ac8d 100644
--- a/docs/images/guides/multiplot/guideFacetsWithFormattingAndSorting_dark.svg
+++ b/docs/images/guides/multiplot/guideFacetsWithFormattingAndSorting_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_16 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_16 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .tooltip-text {
+#_sample_helper_static_id_prefix_16 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .tooltip-title {
+#_sample_helper_static_id_prefix_16 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .tooltip-label {
+#_sample_helper_static_id_prefix_16 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M5.6843418860808015E-14 0.0 L5.6843418860808015E-14 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.000000000000057 6.0 ) ">
@@ -177,7 +177,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 19.0), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 19.0), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(21.961210910936405 19.0 ) ">
           <g>
             <g>
@@ -189,7 +189,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="21.961210910936405" y="19.0" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -234,7 +234,7 @@ font-size: 13.0px;
         <g transform="translate(130.12326144454352 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (130.12326144454352, 19.0), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (130.12326144454352, 19.0), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(130.12326144454352 19.0 ) ">
           <g>
             <g>
@@ -315,7 +315,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="130.12326144454352" y="19.0" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -360,7 +360,7 @@ font-size: 13.0px;
         <g transform="translate(238.28531197815062 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (238.28531197815062, 19.0), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (238.28531197815062, 19.0), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(238.28531197815062 19.0 ) ">
           <g>
             <g>
@@ -372,7 +372,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="238.28531197815062" y="19.0" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -417,7 +417,7 @@ font-size: 13.0px;
         <g transform="translate(346.4473625117577 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (346.4473625117577, 19.0), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (346.4473625117577, 19.0), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(346.4473625117577 19.0 ) ">
           <g>
             <g>
@@ -502,7 +502,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="346.4473625117577" y="19.0" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -547,7 +547,7 @@ font-size: 13.0px;
         <g transform="translate(454.6094130453648 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (454.6094130453648, 19.0), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (454.6094130453648, 19.0), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(454.6094130453648 19.0 ) ">
           <g>
             <g>
@@ -662,7 +662,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="454.6094130453648" y="19.0" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -732,7 +732,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (21.961210910936405, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (21.961210910936405, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(21.961210910936405 157.33333333333334 ) ">
           <g>
             <g>
@@ -744,7 +744,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx6">
+          <clipPath id="_sample_helper_static_id_prefix_6">
             <rect x="21.961210910936405" y="157.33333333333334" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -782,7 +782,7 @@ font-size: 13.0px;
         <g transform="translate(130.12326144454352 157.33333333333334 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (130.12326144454352, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (130.12326144454352, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(130.12326144454352 157.33333333333334 ) ">
           <g>
             <g>
@@ -855,7 +855,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx7">
+          <clipPath id="_sample_helper_static_id_prefix_7">
             <rect x="130.12326144454352" y="157.33333333333334" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -893,7 +893,7 @@ font-size: 13.0px;
         <g transform="translate(238.28531197815062 157.33333333333334 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (238.28531197815062, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (238.28531197815062, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(238.28531197815062 157.33333333333334 ) ">
           <g>
             <g>
@@ -908,7 +908,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx8">
+          <clipPath id="_sample_helper_static_id_prefix_8">
             <rect x="238.28531197815062" y="157.33333333333334" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -946,7 +946,7 @@ font-size: 13.0px;
         <g transform="translate(346.4473625117577 157.33333333333334 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx9)" clip-bounds-jfx="[rect (346.4473625117577, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_9)" clip-bounds-jfx="[rect (346.4473625117577, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(346.4473625117577 157.33333333333334 ) ">
           <g>
             <g>
@@ -962,7 +962,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx9">
+          <clipPath id="_sample_helper_static_id_prefix_9">
             <rect x="346.4473625117577" y="157.33333333333334" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -1000,7 +1000,7 @@ font-size: 13.0px;
         <g transform="translate(454.6094130453648 157.33333333333334 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx10)" clip-bounds-jfx="[rect (454.6094130453648, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_10)" clip-bounds-jfx="[rect (454.6094130453648, 157.33333333333334), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(454.6094130453648 157.33333333333334 ) ">
           <g>
             <g>
@@ -1012,7 +1012,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx10">
+          <clipPath id="_sample_helper_static_id_prefix_10">
             <rect x="454.6094130453648" y="157.33333333333334" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -1084,7 +1084,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (21.961210910936405, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (21.961210910936405, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(21.961210910936405 295.6666666666667 ) ">
           <g>
             <g>
@@ -1100,7 +1100,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx11">
+          <clipPath id="_sample_helper_static_id_prefix_11">
             <rect x="21.961210910936405" y="295.6666666666667" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -1147,7 +1147,7 @@ font-size: 13.0px;
         <g transform="translate(130.12326144454352 295.6666666666667 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx12)" clip-bounds-jfx="[rect (130.12326144454352, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_12)" clip-bounds-jfx="[rect (130.12326144454352, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(130.12326144454352 295.6666666666667 ) ">
           <g>
             <g>
@@ -1228,7 +1228,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx12">
+          <clipPath id="_sample_helper_static_id_prefix_12">
             <rect x="130.12326144454352" y="295.6666666666667" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -1275,7 +1275,7 @@ font-size: 13.0px;
         <g transform="translate(238.28531197815062 295.6666666666667 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx13)" clip-bounds-jfx="[rect (238.28531197815062, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_13)" clip-bounds-jfx="[rect (238.28531197815062, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(238.28531197815062 295.6666666666667 ) ">
           <g>
             <g>
@@ -1287,7 +1287,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx13">
+          <clipPath id="_sample_helper_static_id_prefix_13">
             <rect x="238.28531197815062" y="295.6666666666667" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -1334,7 +1334,7 @@ font-size: 13.0px;
         <g transform="translate(346.4473625117577 295.6666666666667 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (346.4473625117577, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (346.4473625117577, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(346.4473625117577 295.6666666666667 ) ">
           <g>
             <g>
@@ -1352,7 +1352,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx14">
+          <clipPath id="_sample_helper_static_id_prefix_14">
             <rect x="346.4473625117577" y="295.6666666666667" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -1399,7 +1399,7 @@ font-size: 13.0px;
         <g transform="translate(454.6094130453648 295.6666666666667 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx15)" clip-bounds-jfx="[rect (454.6094130453648, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_15)" clip-bounds-jfx="[rect (454.6094130453648, 295.6666666666667), (98.1620505336071, 128.33333333333334)]">
         <g transform="translate(454.6094130453648 295.6666666666667 ) ">
           <g>
             <g>
@@ -1411,7 +1411,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx15">
+          <clipPath id="_sample_helper_static_id_prefix_15">
             <rect x="454.6094130453648" y="295.6666666666667" width="98.1620505336071" height="128.33333333333334">
             </rect>
           </clipPath>
@@ -1509,6 +1509,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M5.6843418860808015E-14 0.0 L5.6843418860808015E-14 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx16">
+  <g id="_sample_helper_static_id_prefix_16">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideFacetsWrapOnePlot.svg b/docs/images/guides/multiplot/guideFacetsWrapOnePlot.svg
index 9bea2f9ca..3fe73704b 100644
--- a/docs/images/guides/multiplot/guideFacetsWrapOnePlot.svg
+++ b/docs/images/guides/multiplot/guideFacetsWrapOnePlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M5.6843418860808015E-14 0.0 L5.6843418860808015E-14 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.000000000000057 6.0 ) ">
@@ -209,7 +209,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 19.0), (176.60341755601183, 188.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 19.0), (176.60341755601183, 188.0)]">
         <g transform="translate(21.961210910936405 19.0 ) ">
           <g>
             <g>
@@ -225,7 +225,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="21.961210910936405" y="19.0" width="176.60341755601183" height="188.0">
             </rect>
           </clipPath>
@@ -284,7 +284,7 @@ font-size: 13.0px;
         <g transform="translate(208.56462846694825 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (208.56462846694825, 19.0), (176.60341755601183, 188.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (208.56462846694825, 19.0), (176.60341755601183, 188.0)]">
         <g transform="translate(208.56462846694825 19.0 ) ">
           <g>
             <g>
@@ -495,7 +495,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="208.56462846694825" y="19.0" width="176.60341755601183" height="188.0">
             </rect>
           </clipPath>
@@ -572,7 +572,7 @@ font-size: 13.0px;
         <g transform="translate(395.1680460229601 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (395.1680460229601, 19.0), (176.60341755601183, 188.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (395.1680460229601, 19.0), (176.60341755601183, 188.0)]">
         <g transform="translate(395.1680460229601 19.0 ) ">
           <g>
             <g>
@@ -587,7 +587,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="395.1680460229601" y="19.0" width="176.60341755601183" height="188.0">
             </rect>
           </clipPath>
@@ -700,7 +700,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (21.961210910936405, 236.0), (176.60341755601183, 188.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (21.961210910936405, 236.0), (176.60341755601183, 188.0)]">
         <g transform="translate(21.961210910936405 236.0 ) ">
           <g>
             <g>
@@ -795,7 +795,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="21.961210910936405" y="236.0" width="176.60341755601183" height="188.0">
             </rect>
           </clipPath>
@@ -872,7 +872,7 @@ font-size: 13.0px;
         <g transform="translate(208.56462846694825 236.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (208.56462846694825, 236.0), (176.60341755601183, 188.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (208.56462846694825, 236.0), (176.60341755601183, 188.0)]">
         <g transform="translate(208.56462846694825 236.0 ) ">
           <g>
             <g>
@@ -987,7 +987,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="208.56462846694825" y="236.0" width="176.60341755601183" height="188.0">
             </rect>
           </clipPath>
@@ -1085,6 +1085,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M5.6843418860808015E-14 0.0 L5.6843418860808015E-14 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx6">
+  <g id="_sample_helper_static_id_prefix_6">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideFacetsWrapOnePlot_dark.svg b/docs/images/guides/multiplot/guideFacetsWrapOnePlot_dark.svg
index e24186e42..181be2c13 100644
--- a/docs/images/guides/multiplot/guideFacetsWrapOnePlot_dark.svg
+++ b/docs/images/guides/multiplot/guideFacetsWrapOnePlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M5.6843418860808015E-14 0.0 L5.6843418860808015E-14 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.000000000000057 6.0 ) ">
@@ -209,7 +209,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 19.0), (176.60341755601183, 188.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 19.0), (176.60341755601183, 188.0)]">
         <g transform="translate(21.961210910936405 19.0 ) ">
           <g>
             <g>
@@ -225,7 +225,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="21.961210910936405" y="19.0" width="176.60341755601183" height="188.0">
             </rect>
           </clipPath>
@@ -284,7 +284,7 @@ font-size: 13.0px;
         <g transform="translate(208.56462846694825 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (208.56462846694825, 19.0), (176.60341755601183, 188.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (208.56462846694825, 19.0), (176.60341755601183, 188.0)]">
         <g transform="translate(208.56462846694825 19.0 ) ">
           <g>
             <g>
@@ -495,7 +495,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="208.56462846694825" y="19.0" width="176.60341755601183" height="188.0">
             </rect>
           </clipPath>
@@ -572,7 +572,7 @@ font-size: 13.0px;
         <g transform="translate(395.1680460229601 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (395.1680460229601, 19.0), (176.60341755601183, 188.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (395.1680460229601, 19.0), (176.60341755601183, 188.0)]">
         <g transform="translate(395.1680460229601 19.0 ) ">
           <g>
             <g>
@@ -587,7 +587,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="395.1680460229601" y="19.0" width="176.60341755601183" height="188.0">
             </rect>
           </clipPath>
@@ -700,7 +700,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (21.961210910936405, 236.0), (176.60341755601183, 188.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (21.961210910936405, 236.0), (176.60341755601183, 188.0)]">
         <g transform="translate(21.961210910936405 236.0 ) ">
           <g>
             <g>
@@ -795,7 +795,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="21.961210910936405" y="236.0" width="176.60341755601183" height="188.0">
             </rect>
           </clipPath>
@@ -872,7 +872,7 @@ font-size: 13.0px;
         <g transform="translate(208.56462846694825 236.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (208.56462846694825, 236.0), (176.60341755601183, 188.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (208.56462846694825, 236.0), (176.60341755601183, 188.0)]">
         <g transform="translate(208.56462846694825 236.0 ) ">
           <g>
             <g>
@@ -987,7 +987,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="208.56462846694825" y="236.0" width="176.60341755601183" height="188.0">
             </rect>
           </clipPath>
@@ -1085,6 +1085,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M5.6843418860808015E-14 0.0 L5.6843418860808015E-14 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx6">
+  <g id="_sample_helper_static_id_prefix_6">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideFacetsWrapTwoPlots.svg b/docs/images/guides/multiplot/guideFacetsWrapTwoPlots.svg
index 05211130e..056d681dd 100644
--- a/docs/images/guides/multiplot/guideFacetsWrapTwoPlots.svg
+++ b/docs/images/guides/multiplot/guideFacetsWrapTwoPlots.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_10 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_10 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .tooltip-text {
+#_sample_helper_static_id_prefix_10 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .tooltip-title {
+#_sample_helper_static_id_prefix_10 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .tooltip-label {
+#_sample_helper_static_id_prefix_10 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M5.6843418860808015E-14 0.0 L5.6843418860808015E-14 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.000000000000057 6.0 ) ">
@@ -203,7 +203,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 38.0), (101.9620505336071, 169.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 38.0), (101.9620505336071, 169.0)]">
         <g transform="translate(21.961210910936405 38.0 ) ">
           <g>
             <g>
@@ -219,7 +219,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="21.961210910936405" y="38.0" width="101.9620505336071" height="169.0">
             </rect>
           </clipPath>
@@ -279,7 +279,7 @@ font-size: 13.0px;
         <g transform="translate(133.9232614445435 38.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (133.9232614445435, 38.0), (101.9620505336071, 169.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (133.9232614445435, 38.0), (101.9620505336071, 169.0)]">
         <g transform="translate(133.9232614445435 38.0 ) ">
           <g>
             <g>
@@ -360,7 +360,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="133.9232614445435" y="38.0" width="101.9620505336071" height="169.0">
             </rect>
           </clipPath>
@@ -420,7 +420,7 @@ font-size: 13.0px;
         <g transform="translate(245.88531197815058 38.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (245.88531197815058, 38.0), (101.9620505336071, 169.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (245.88531197815058, 38.0), (101.9620505336071, 169.0)]">
         <g transform="translate(245.88531197815058 38.0 ) ">
           <g>
             <g>
@@ -438,7 +438,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="245.88531197815058" y="38.0" width="101.9620505336071" height="169.0">
             </rect>
           </clipPath>
@@ -498,7 +498,7 @@ font-size: 13.0px;
         <g transform="translate(357.8473625117577 38.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (357.8473625117577, 38.0), (101.9620505336071, 169.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (357.8473625117577, 38.0), (101.9620505336071, 169.0)]">
         <g transform="translate(357.8473625117577 38.0 ) ">
           <g>
             <g>
@@ -571,7 +571,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="357.8473625117577" y="38.0" width="101.9620505336071" height="169.0">
             </rect>
           </clipPath>
@@ -640,7 +640,7 @@ font-size: 13.0px;
         <g transform="translate(469.8094130453648 38.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (469.8094130453648, 38.0), (101.9620505336071, 169.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (469.8094130453648, 38.0), (101.9620505336071, 169.0)]">
         <g transform="translate(469.8094130453648 38.0 ) ">
           <g>
             <g>
@@ -655,7 +655,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="469.8094130453648" y="38.0" width="101.9620505336071" height="169.0">
             </rect>
           </clipPath>
@@ -760,7 +760,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (21.961210910936405, 255.0), (101.9620505336071, 169.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (21.961210910936405, 255.0), (101.9620505336071, 169.0)]">
         <g transform="translate(21.961210910936405 255.0 ) ">
           <g>
             <g>
@@ -776,7 +776,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx6">
+          <clipPath id="_sample_helper_static_id_prefix_6">
             <rect x="21.961210910936405" y="255.0" width="101.9620505336071" height="169.0">
             </rect>
           </clipPath>
@@ -845,7 +845,7 @@ font-size: 13.0px;
         <g transform="translate(133.9232614445435 255.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (133.9232614445435, 255.0), (101.9620505336071, 169.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (133.9232614445435, 255.0), (101.9620505336071, 169.0)]">
         <g transform="translate(133.9232614445435 255.0 ) ">
           <g>
             <g>
@@ -926,7 +926,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx7">
+          <clipPath id="_sample_helper_static_id_prefix_7">
             <rect x="133.9232614445435" y="255.0" width="101.9620505336071" height="169.0">
             </rect>
           </clipPath>
@@ -995,7 +995,7 @@ font-size: 13.0px;
         <g transform="translate(245.88531197815058 255.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (245.88531197815058, 255.0), (101.9620505336071, 169.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (245.88531197815058, 255.0), (101.9620505336071, 169.0)]">
         <g transform="translate(245.88531197815058 255.0 ) ">
           <g>
             <g>
@@ -1080,7 +1080,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx8">
+          <clipPath id="_sample_helper_static_id_prefix_8">
             <rect x="245.88531197815058" y="255.0" width="101.9620505336071" height="169.0">
             </rect>
           </clipPath>
@@ -1149,7 +1149,7 @@ font-size: 13.0px;
         <g transform="translate(357.8473625117577 255.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx9)" clip-bounds-jfx="[rect (357.8473625117577, 255.0), (101.9620505336071, 169.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_9)" clip-bounds-jfx="[rect (357.8473625117577, 255.0), (101.9620505336071, 169.0)]">
         <g transform="translate(357.8473625117577 255.0 ) ">
           <g>
             <g>
@@ -1264,7 +1264,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx9">
+          <clipPath id="_sample_helper_static_id_prefix_9">
             <rect x="357.8473625117577" y="255.0" width="101.9620505336071" height="169.0">
             </rect>
           </clipPath>
@@ -1369,6 +1369,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M5.6843418860808015E-14 0.0 L5.6843418860808015E-14 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx10">
+  <g id="_sample_helper_static_id_prefix_10">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideFacetsWrapTwoPlots_dark.svg b/docs/images/guides/multiplot/guideFacetsWrapTwoPlots_dark.svg
index e33a6107e..9120e1268 100644
--- a/docs/images/guides/multiplot/guideFacetsWrapTwoPlots_dark.svg
+++ b/docs/images/guides/multiplot/guideFacetsWrapTwoPlots_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_10 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_10 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .tooltip-text {
+#_sample_helper_static_id_prefix_10 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .tooltip-title {
+#_sample_helper_static_id_prefix_10 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .tooltip-label {
+#_sample_helper_static_id_prefix_10 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M5.6843418860808015E-14 0.0 L5.6843418860808015E-14 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.000000000000057 6.0 ) ">
@@ -203,7 +203,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 38.0), (101.9620505336071, 169.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 38.0), (101.9620505336071, 169.0)]">
         <g transform="translate(21.961210910936405 38.0 ) ">
           <g>
             <g>
@@ -219,7 +219,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="21.961210910936405" y="38.0" width="101.9620505336071" height="169.0">
             </rect>
           </clipPath>
@@ -279,7 +279,7 @@ font-size: 13.0px;
         <g transform="translate(133.9232614445435 38.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (133.9232614445435, 38.0), (101.9620505336071, 169.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (133.9232614445435, 38.0), (101.9620505336071, 169.0)]">
         <g transform="translate(133.9232614445435 38.0 ) ">
           <g>
             <g>
@@ -360,7 +360,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="133.9232614445435" y="38.0" width="101.9620505336071" height="169.0">
             </rect>
           </clipPath>
@@ -420,7 +420,7 @@ font-size: 13.0px;
         <g transform="translate(245.88531197815058 38.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (245.88531197815058, 38.0), (101.9620505336071, 169.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (245.88531197815058, 38.0), (101.9620505336071, 169.0)]">
         <g transform="translate(245.88531197815058 38.0 ) ">
           <g>
             <g>
@@ -438,7 +438,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="245.88531197815058" y="38.0" width="101.9620505336071" height="169.0">
             </rect>
           </clipPath>
@@ -498,7 +498,7 @@ font-size: 13.0px;
         <g transform="translate(357.8473625117577 38.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (357.8473625117577, 38.0), (101.9620505336071, 169.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (357.8473625117577, 38.0), (101.9620505336071, 169.0)]">
         <g transform="translate(357.8473625117577 38.0 ) ">
           <g>
             <g>
@@ -571,7 +571,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="357.8473625117577" y="38.0" width="101.9620505336071" height="169.0">
             </rect>
           </clipPath>
@@ -640,7 +640,7 @@ font-size: 13.0px;
         <g transform="translate(469.8094130453648 38.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (469.8094130453648, 38.0), (101.9620505336071, 169.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (469.8094130453648, 38.0), (101.9620505336071, 169.0)]">
         <g transform="translate(469.8094130453648 38.0 ) ">
           <g>
             <g>
@@ -655,7 +655,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="469.8094130453648" y="38.0" width="101.9620505336071" height="169.0">
             </rect>
           </clipPath>
@@ -760,7 +760,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (21.961210910936405, 255.0), (101.9620505336071, 169.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (21.961210910936405, 255.0), (101.9620505336071, 169.0)]">
         <g transform="translate(21.961210910936405 255.0 ) ">
           <g>
             <g>
@@ -776,7 +776,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx6">
+          <clipPath id="_sample_helper_static_id_prefix_6">
             <rect x="21.961210910936405" y="255.0" width="101.9620505336071" height="169.0">
             </rect>
           </clipPath>
@@ -845,7 +845,7 @@ font-size: 13.0px;
         <g transform="translate(133.9232614445435 255.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (133.9232614445435, 255.0), (101.9620505336071, 169.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (133.9232614445435, 255.0), (101.9620505336071, 169.0)]">
         <g transform="translate(133.9232614445435 255.0 ) ">
           <g>
             <g>
@@ -926,7 +926,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx7">
+          <clipPath id="_sample_helper_static_id_prefix_7">
             <rect x="133.9232614445435" y="255.0" width="101.9620505336071" height="169.0">
             </rect>
           </clipPath>
@@ -995,7 +995,7 @@ font-size: 13.0px;
         <g transform="translate(245.88531197815058 255.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (245.88531197815058, 255.0), (101.9620505336071, 169.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (245.88531197815058, 255.0), (101.9620505336071, 169.0)]">
         <g transform="translate(245.88531197815058 255.0 ) ">
           <g>
             <g>
@@ -1080,7 +1080,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx8">
+          <clipPath id="_sample_helper_static_id_prefix_8">
             <rect x="245.88531197815058" y="255.0" width="101.9620505336071" height="169.0">
             </rect>
           </clipPath>
@@ -1149,7 +1149,7 @@ font-size: 13.0px;
         <g transform="translate(357.8473625117577 255.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx9)" clip-bounds-jfx="[rect (357.8473625117577, 255.0), (101.9620505336071, 169.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_9)" clip-bounds-jfx="[rect (357.8473625117577, 255.0), (101.9620505336071, 169.0)]">
         <g transform="translate(357.8473625117577 255.0 ) ">
           <g>
             <g>
@@ -1264,7 +1264,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx9">
+          <clipPath id="_sample_helper_static_id_prefix_9">
             <rect x="357.8473625117577" y="255.0" width="101.9620505336071" height="169.0">
             </rect>
           </clipPath>
@@ -1369,6 +1369,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M5.6843418860808015E-14 0.0 L5.6843418860808015E-14 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx10">
+  <g id="_sample_helper_static_id_prefix_10">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideFreeFacetGridYFree.svg b/docs/images/guides/multiplot/guideFreeFacetGridYFree.svg
index fd8962258..dd75c3ce9 100644
--- a/docs/images/guides/multiplot/guideFreeFacetGridYFree.svg
+++ b/docs/images/guides/multiplot/guideFreeFacetGridYFree.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 440.00000000000006 L705.0 440.00000000000006 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -215,7 +215,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (522.8296472125674, 124.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (522.8296472125674, 124.66666666666667)]">
         <g transform="translate(29.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -306,7 +306,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="29.941816366404606" y="0.0" width="522.8296472125674" height="124.66666666666667">
             </rect>
           </clipPath>
@@ -409,7 +409,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (29.941816366404606, 134.66666666666669), (522.8296472125674, 124.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (29.941816366404606, 134.66666666666669), (522.8296472125674, 124.66666666666667)]">
         <g transform="translate(29.941816366404606 134.66666666666669 ) ">
           <g>
             <g>
@@ -489,7 +489,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="29.941816366404606" y="134.66666666666669" width="522.8296472125674" height="124.66666666666667">
             </rect>
           </clipPath>
@@ -680,7 +680,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (29.941816366404606, 269.33333333333337), (522.8296472125674, 124.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (29.941816366404606, 269.33333333333337), (522.8296472125674, 124.66666666666667)]">
         <g transform="translate(29.941816366404606 269.33333333333337 ) ">
           <g>
             <g>
@@ -937,7 +937,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="29.941816366404606" y="269.33333333333337" width="522.8296472125674" height="124.66666666666667">
             </rect>
           </clipPath>
@@ -1035,6 +1035,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 440.00000000000006 L705.0 440.00000000000006 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideFreeFacetGridYFree_dark.svg b/docs/images/guides/multiplot/guideFreeFacetGridYFree_dark.svg
index 3b33ba6ea..979ad1215 100644
--- a/docs/images/guides/multiplot/guideFreeFacetGridYFree_dark.svg
+++ b/docs/images/guides/multiplot/guideFreeFacetGridYFree_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 440.00000000000006 L705.0 440.00000000000006 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -215,7 +215,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (522.8296472125674, 124.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (522.8296472125674, 124.66666666666667)]">
         <g transform="translate(29.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -306,7 +306,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="29.941816366404606" y="0.0" width="522.8296472125674" height="124.66666666666667">
             </rect>
           </clipPath>
@@ -409,7 +409,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (29.941816366404606, 134.66666666666669), (522.8296472125674, 124.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (29.941816366404606, 134.66666666666669), (522.8296472125674, 124.66666666666667)]">
         <g transform="translate(29.941816366404606 134.66666666666669 ) ">
           <g>
             <g>
@@ -489,7 +489,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="29.941816366404606" y="134.66666666666669" width="522.8296472125674" height="124.66666666666667">
             </rect>
           </clipPath>
@@ -680,7 +680,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (29.941816366404606, 269.33333333333337), (522.8296472125674, 124.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (29.941816366404606, 269.33333333333337), (522.8296472125674, 124.66666666666667)]">
         <g transform="translate(29.941816366404606 269.33333333333337 ) ">
           <g>
             <g>
@@ -937,7 +937,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="29.941816366404606" y="269.33333333333337" width="522.8296472125674" height="124.66666666666667">
             </rect>
           </clipPath>
@@ -1035,6 +1035,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 440.00000000000006 L705.0 440.00000000000006 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideFreeFacetSimplePlot.svg b/docs/images/guides/multiplot/guideFreeFacetSimplePlot.svg
index 86a39e42c..415bc3814 100644
--- a/docs/images/guides/multiplot/guideFreeFacetSimplePlot.svg
+++ b/docs/images/guides/multiplot/guideFreeFacetSimplePlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 308.0 L705.0 308.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -331,7 +331,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (541.8296472125674, 262.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (541.8296472125674, 262.0)]">
         <g transform="translate(29.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -735,7 +735,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="29.941816366404606" y="0.0" width="541.8296472125674" height="262.0">
             </rect>
           </clipPath>
@@ -826,6 +826,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 308.0 L705.0 308.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideFreeFacetSimplePlot_dark.svg b/docs/images/guides/multiplot/guideFreeFacetSimplePlot_dark.svg
index 69a376eb6..e055f5c5f 100644
--- a/docs/images/guides/multiplot/guideFreeFacetSimplePlot_dark.svg
+++ b/docs/images/guides/multiplot/guideFreeFacetSimplePlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 308.0 L705.0 308.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -331,7 +331,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (541.8296472125674, 262.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (541.8296472125674, 262.0)]">
         <g transform="translate(29.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -735,7 +735,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="29.941816366404606" y="0.0" width="541.8296472125674" height="262.0">
             </rect>
           </clipPath>
@@ -826,6 +826,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 308.0 L705.0 308.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideFreeFacetWithFixedScales.svg b/docs/images/guides/multiplot/guideFreeFacetWithFixedScales.svg
index 8bdaa03d5..a9aaf894d 100644
--- a/docs/images/guides/multiplot/guideFreeFacetWithFixedScales.svg
+++ b/docs/images/guides/multiplot/guideFreeFacetWithFixedScales.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 440.00000000000006 L705.0 440.00000000000006 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -215,7 +215,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (522.8296472125674, 124.66666666666669)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (522.8296472125674, 124.66666666666669)]">
         <g transform="translate(29.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -306,7 +306,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="29.941816366404606" y="0.0" width="522.8296472125674" height="124.66666666666669">
             </rect>
           </clipPath>
@@ -407,7 +407,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (29.941816366404606, 134.66666666666669), (522.8296472125674, 124.66666666666669)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (29.941816366404606, 134.66666666666669), (522.8296472125674, 124.66666666666669)]">
         <g transform="translate(29.941816366404606 134.66666666666669 ) ">
           <g>
             <g>
@@ -487,7 +487,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="29.941816366404606" y="134.66666666666669" width="522.8296472125674" height="124.66666666666669">
             </rect>
           </clipPath>
@@ -678,7 +678,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (29.941816366404606, 269.33333333333337), (522.8296472125674, 124.66666666666669)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (29.941816366404606, 269.33333333333337), (522.8296472125674, 124.66666666666669)]">
         <g transform="translate(29.941816366404606 269.33333333333337 ) ">
           <g>
             <g>
@@ -935,7 +935,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="29.941816366404606" y="269.33333333333337" width="522.8296472125674" height="124.66666666666669">
             </rect>
           </clipPath>
@@ -1033,6 +1033,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 440.00000000000006 L705.0 440.00000000000006 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideFreeFacetWithFixedScales_dark.svg b/docs/images/guides/multiplot/guideFreeFacetWithFixedScales_dark.svg
index d80b7064e..cc84e5861 100644
--- a/docs/images/guides/multiplot/guideFreeFacetWithFixedScales_dark.svg
+++ b/docs/images/guides/multiplot/guideFreeFacetWithFixedScales_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 440.00000000000006 L705.0 440.00000000000006 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -215,7 +215,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (522.8296472125674, 124.66666666666669)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (522.8296472125674, 124.66666666666669)]">
         <g transform="translate(29.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -306,7 +306,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="29.941816366404606" y="0.0" width="522.8296472125674" height="124.66666666666669">
             </rect>
           </clipPath>
@@ -407,7 +407,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (29.941816366404606, 134.66666666666669), (522.8296472125674, 124.66666666666669)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (29.941816366404606, 134.66666666666669), (522.8296472125674, 124.66666666666669)]">
         <g transform="translate(29.941816366404606 134.66666666666669 ) ">
           <g>
             <g>
@@ -487,7 +487,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="29.941816366404606" y="134.66666666666669" width="522.8296472125674" height="124.66666666666669">
             </rect>
           </clipPath>
@@ -678,7 +678,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (29.941816366404606, 269.33333333333337), (522.8296472125674, 124.66666666666669)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (29.941816366404606, 269.33333333333337), (522.8296472125674, 124.66666666666669)]">
         <g transform="translate(29.941816366404606 269.33333333333337 ) ">
           <g>
             <g>
@@ -935,7 +935,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="29.941816366404606" y="269.33333333333337" width="522.8296472125674" height="124.66666666666669">
             </rect>
           </clipPath>
@@ -1033,6 +1033,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 440.00000000000006 L705.0 440.00000000000006 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideFreeFacetWrapWithFixedScale.svg b/docs/images/guides/multiplot/guideFreeFacetWrapWithFixedScale.svg
index 826381f1e..fec94efe2 100644
--- a/docs/images/guides/multiplot/guideFreeFacetWrapWithFixedScale.svg
+++ b/docs/images/guides/multiplot/guideFreeFacetWrapWithFixedScale.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 440.00000000000006 L705.0 440.00000000000006 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -191,7 +191,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 19.0), (265.9148236062837, 105.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 19.0), (265.9148236062837, 105.66666666666667)]">
         <g transform="translate(29.941816366404606 19.0 ) ">
           <g>
             <g>
@@ -207,7 +207,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="29.941816366404606" y="19.0" width="265.9148236062837" height="105.66666666666667">
             </rect>
           </clipPath>
@@ -266,7 +266,7 @@ font-size: 13.0px;
         <g transform="translate(305.8566399726883 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (305.8566399726883, 19.0), (265.9148236062837, 105.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (305.8566399726883, 19.0), (265.9148236062837, 105.66666666666667)]">
         <g transform="translate(305.8566399726883 19.0 ) ">
           <g>
             <g>
@@ -477,7 +477,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="305.8566399726883" y="19.0" width="265.9148236062837" height="105.66666666666667">
             </rect>
           </clipPath>
@@ -554,7 +554,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (29.941816366404606, 153.66666666666669), (265.9148236062837, 105.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (29.941816366404606, 153.66666666666669), (265.9148236062837, 105.66666666666667)]">
         <g transform="translate(29.941816366404606 153.66666666666669 ) ">
           <g>
             <g>
@@ -569,7 +569,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="29.941816366404606" y="153.66666666666669" width="265.9148236062837" height="105.66666666666667">
             </rect>
           </clipPath>
@@ -664,7 +664,7 @@ font-size: 13.0px;
         <g transform="translate(305.8566399726883 153.66666666666669 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (305.8566399726883, 153.66666666666669), (265.9148236062837, 105.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (305.8566399726883, 153.66666666666669), (265.9148236062837, 105.66666666666667)]">
         <g transform="translate(305.8566399726883 153.66666666666669 ) ">
           <g>
             <g>
@@ -759,7 +759,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="305.8566399726883" y="153.66666666666669" width="265.9148236062837" height="105.66666666666667">
             </rect>
           </clipPath>
@@ -872,7 +872,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (29.941816366404606, 288.33333333333337), (265.9148236062837, 105.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (29.941816366404606, 288.33333333333337), (265.9148236062837, 105.66666666666667)]">
         <g transform="translate(29.941816366404606 288.33333333333337 ) ">
           <g>
             <g>
@@ -987,7 +987,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="29.941816366404606" y="288.33333333333337" width="265.9148236062837" height="105.66666666666667">
             </rect>
           </clipPath>
@@ -1085,6 +1085,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 440.00000000000006 L705.0 440.00000000000006 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx6">
+  <g id="_sample_helper_static_id_prefix_6">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideFreeFacetWrapWithFixedScale_dark.svg b/docs/images/guides/multiplot/guideFreeFacetWrapWithFixedScale_dark.svg
index 5e9a887e9..4a538613b 100644
--- a/docs/images/guides/multiplot/guideFreeFacetWrapWithFixedScale_dark.svg
+++ b/docs/images/guides/multiplot/guideFreeFacetWrapWithFixedScale_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 440.00000000000006 L705.0 440.00000000000006 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -191,7 +191,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 19.0), (265.9148236062837, 105.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 19.0), (265.9148236062837, 105.66666666666667)]">
         <g transform="translate(29.941816366404606 19.0 ) ">
           <g>
             <g>
@@ -207,7 +207,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="29.941816366404606" y="19.0" width="265.9148236062837" height="105.66666666666667">
             </rect>
           </clipPath>
@@ -266,7 +266,7 @@ font-size: 13.0px;
         <g transform="translate(305.8566399726883 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (305.8566399726883, 19.0), (265.9148236062837, 105.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (305.8566399726883, 19.0), (265.9148236062837, 105.66666666666667)]">
         <g transform="translate(305.8566399726883 19.0 ) ">
           <g>
             <g>
@@ -477,7 +477,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="305.8566399726883" y="19.0" width="265.9148236062837" height="105.66666666666667">
             </rect>
           </clipPath>
@@ -554,7 +554,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (29.941816366404606, 153.66666666666669), (265.9148236062837, 105.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (29.941816366404606, 153.66666666666669), (265.9148236062837, 105.66666666666667)]">
         <g transform="translate(29.941816366404606 153.66666666666669 ) ">
           <g>
             <g>
@@ -569,7 +569,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="29.941816366404606" y="153.66666666666669" width="265.9148236062837" height="105.66666666666667">
             </rect>
           </clipPath>
@@ -664,7 +664,7 @@ font-size: 13.0px;
         <g transform="translate(305.8566399726883 153.66666666666669 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (305.8566399726883, 153.66666666666669), (265.9148236062837, 105.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (305.8566399726883, 153.66666666666669), (265.9148236062837, 105.66666666666667)]">
         <g transform="translate(305.8566399726883 153.66666666666669 ) ">
           <g>
             <g>
@@ -759,7 +759,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="305.8566399726883" y="153.66666666666669" width="265.9148236062837" height="105.66666666666667">
             </rect>
           </clipPath>
@@ -872,7 +872,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (29.941816366404606, 288.33333333333337), (265.9148236062837, 105.66666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (29.941816366404606, 288.33333333333337), (265.9148236062837, 105.66666666666667)]">
         <g transform="translate(29.941816366404606 288.33333333333337 ) ">
           <g>
             <g>
@@ -987,7 +987,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="29.941816366404606" y="288.33333333333337" width="265.9148236062837" height="105.66666666666667">
             </rect>
           </clipPath>
@@ -1085,6 +1085,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 440.00000000000006 L705.0 440.00000000000006 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx6">
+  <g id="_sample_helper_static_id_prefix_6">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideFreeFacetWrapWithFreeScale.svg b/docs/images/guides/multiplot/guideFreeFacetWrapWithFreeScale.svg
index fcfebd16d..7ee85fe1e 100644
--- a/docs/images/guides/multiplot/guideFreeFacetWrapWithFreeScale.svg
+++ b/docs/images/guides/multiplot/guideFreeFacetWrapWithFreeScale.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 440.0 L705.0 440.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -210,7 +210,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 19.0), (250.94391542308136, 93.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 19.0), (250.94391542308136, 93.0)]">
         <g transform="translate(29.941816366404606 19.0 ) ">
           <g>
             <g>
@@ -226,7 +226,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="29.941816366404606" y="19.0" width="250.94391542308136" height="93.0">
             </rect>
           </clipPath>
@@ -328,7 +328,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (320.8275481558906, 19.0), (250.94391542308136, 93.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (320.8275481558906, 19.0), (250.94391542308136, 93.0)]">
         <g transform="translate(320.8275481558906 19.0 ) ">
           <g>
             <g>
@@ -539,7 +539,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="320.8275481558906" y="19.0" width="250.94391542308136" height="93.0">
             </rect>
           </clipPath>
@@ -635,7 +635,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (29.941816366404606, 160.0), (250.94391542308136, 93.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (29.941816366404606, 160.0), (250.94391542308136, 93.0)]">
         <g transform="translate(29.941816366404606 160.0 ) ">
           <g>
             <g>
@@ -650,7 +650,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="29.941816366404606" y="160.0" width="250.94391542308136" height="93.0">
             </rect>
           </clipPath>
@@ -722,7 +722,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (320.8275481558906, 160.0), (250.94391542308136, 93.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (320.8275481558906, 160.0), (250.94391542308136, 93.0)]">
         <g transform="translate(320.8275481558906 160.0 ) ">
           <g>
             <g>
@@ -817,7 +817,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="320.8275481558906" y="160.0" width="250.94391542308136" height="93.0">
             </rect>
           </clipPath>
@@ -917,7 +917,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (29.941816366404606, 301.0), (250.94391542308136, 93.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (29.941816366404606, 301.0), (250.94391542308136, 93.0)]">
         <g transform="translate(29.941816366404606 301.0 ) ">
           <g>
             <g>
@@ -1032,7 +1032,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="29.941816366404606" y="301.0" width="250.94391542308136" height="93.0">
             </rect>
           </clipPath>
@@ -1130,6 +1130,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 440.0 L705.0 440.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx6">
+  <g id="_sample_helper_static_id_prefix_6">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/multiplot/guideFreeFacetWrapWithFreeScale_dark.svg b/docs/images/guides/multiplot/guideFreeFacetWrapWithFreeScale_dark.svg
index bab82379d..f60019af0 100644
--- a/docs/images/guides/multiplot/guideFreeFacetWrapWithFreeScale_dark.svg
+++ b/docs/images/guides/multiplot/guideFreeFacetWrapWithFreeScale_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 440.0 L705.0 440.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -210,7 +210,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 19.0), (250.94391542308136, 93.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 19.0), (250.94391542308136, 93.0)]">
         <g transform="translate(29.941816366404606 19.0 ) ">
           <g>
             <g>
@@ -226,7 +226,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="29.941816366404606" y="19.0" width="250.94391542308136" height="93.0">
             </rect>
           </clipPath>
@@ -328,7 +328,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (320.8275481558906, 19.0), (250.94391542308136, 93.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (320.8275481558906, 19.0), (250.94391542308136, 93.0)]">
         <g transform="translate(320.8275481558906 19.0 ) ">
           <g>
             <g>
@@ -539,7 +539,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="320.8275481558906" y="19.0" width="250.94391542308136" height="93.0">
             </rect>
           </clipPath>
@@ -635,7 +635,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (29.941816366404606, 160.0), (250.94391542308136, 93.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (29.941816366404606, 160.0), (250.94391542308136, 93.0)]">
         <g transform="translate(29.941816366404606 160.0 ) ">
           <g>
             <g>
@@ -650,7 +650,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="29.941816366404606" y="160.0" width="250.94391542308136" height="93.0">
             </rect>
           </clipPath>
@@ -722,7 +722,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (320.8275481558906, 160.0), (250.94391542308136, 93.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (320.8275481558906, 160.0), (250.94391542308136, 93.0)]">
         <g transform="translate(320.8275481558906 160.0 ) ">
           <g>
             <g>
@@ -817,7 +817,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="320.8275481558906" y="160.0" width="250.94391542308136" height="93.0">
             </rect>
           </clipPath>
@@ -917,7 +917,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (29.941816366404606, 301.0), (250.94391542308136, 93.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (29.941816366404606, 301.0), (250.94391542308136, 93.0)]">
         <g transform="translate(29.941816366404606 301.0 ) ">
           <g>
             <g>
@@ -1032,7 +1032,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="29.941816366404606" y="301.0" width="250.94391542308136" height="93.0">
             </rect>
           </clipPath>
@@ -1130,6 +1130,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 440.0 L705.0 440.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx6">
+  <g id="_sample_helper_static_id_prefix_6">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/other/guideExportDensityPlot.svg b/docs/images/guides/other/guideExportDensityPlot.svg
index 278e74c27..9130c6e8c 100644
--- a/docs/images/guides/other/guideExportDensityPlot.svg
+++ b/docs/images/guides/other/guideExportDensityPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (600.1468287534785, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (600.1468287534785, 424.0)]">
         <g transform="translate(31.015306675749617 0.0 ) ">
           <g>
             <g>
@@ -199,7 +199,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.015306675749617" y="0.0" width="600.1468287534785" height="424.0">
             </rect>
           </clipPath>
@@ -398,6 +398,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/other/guideExportDensityPlot_dark.svg b/docs/images/guides/other/guideExportDensityPlot_dark.svg
index 23ae0d335..d688a0c51 100644
--- a/docs/images/guides/other/guideExportDensityPlot_dark.svg
+++ b/docs/images/guides/other/guideExportDensityPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -309,7 +309,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (600.1468287534785, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (600.1468287534785, 424.0)]">
         <g transform="translate(31.015306675749617 0.0 ) ">
           <g>
             <g>
@@ -333,7 +333,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.015306675749617" y="0.0" width="600.1468287534785" height="424.0">
             </rect>
           </clipPath>
@@ -398,6 +398,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/other/guideSeriesHackBarOnGatheredDf.svg b/docs/images/guides/other/guideSeriesHackBarOnGatheredDf.svg
index 5b74b11d6..eabe03b6f 100644
--- a/docs/images/guides/other/guideSeriesHackBarOnGatheredDf.svg
+++ b/docs/images/guides/other/guideSeriesHackBarOnGatheredDf.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (602.2777078590826, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (602.2777078590826, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -225,7 +225,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="602.2777078590826" height="424.0">
             </rect>
           </clipPath>
@@ -487,6 +487,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/other/guideSeriesHackBarOnGatheredDf_dark.svg b/docs/images/guides/other/guideSeriesHackBarOnGatheredDf_dark.svg
index b0a7198ae..4376cdcc2 100644
--- a/docs/images/guides/other/guideSeriesHackBarOnGatheredDf_dark.svg
+++ b/docs/images/guides/other/guideSeriesHackBarOnGatheredDf_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -369,7 +369,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (602.2777078590826, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (602.2777078590826, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -407,7 +407,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="602.2777078590826" height="424.0">
             </rect>
           </clipPath>
@@ -487,6 +487,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/other/guideSeriesHackBarsSeries.svg b/docs/images/guides/other/guideSeriesHackBarsSeries.svg
index 6125d1f7e..bcc4ec8e8 100644
--- a/docs/images/guides/other/guideSeriesHackBarsSeries.svg
+++ b/docs/images/guides/other/guideSeriesHackBarsSeries.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -229,19 +229,19 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="654.9652987797186" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="23.034701220281416" y="0.0" width="654.9652987797186" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="23.034701220281416" y="0.0" width="654.9652987797186" height="424.0">
             </rect>
           </clipPath>
@@ -445,6 +445,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/other/guideSeriesHackBarsSeries_dark.svg b/docs/images/guides/other/guideSeriesHackBarsSeries_dark.svg
index e971abe46..c565658ff 100644
--- a/docs/images/guides/other/guideSeriesHackBarsSeries_dark.svg
+++ b/docs/images/guides/other/guideSeriesHackBarsSeries_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -369,7 +369,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -411,19 +411,19 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="654.9652987797186" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="23.034701220281416" y="0.0" width="654.9652987797186" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="23.034701220281416" y="0.0" width="654.9652987797186" height="424.0">
             </rect>
           </clipPath>
@@ -445,6 +445,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/other/guideSeriesHackGatheredLines.svg b/docs/images/guides/other/guideSeriesHackGatheredLines.svg
index b48992d63..8cfcac26d 100644
--- a/docs/images/guides/other/guideSeriesHackGatheredLines.svg
+++ b/docs/images/guides/other/guideSeriesHackGatheredLines.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -183,7 +183,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (605.6320714892248, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (605.6320714892248, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -203,7 +203,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="605.6320714892248" height="424.0">
             </rect>
           </clipPath>
@@ -447,6 +447,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/other/guideSeriesHackGatheredLines_dark.svg b/docs/images/guides/other/guideSeriesHackGatheredLines_dark.svg
index d9d68b34d..ed1985bae 100644
--- a/docs/images/guides/other/guideSeriesHackGatheredLines_dark.svg
+++ b/docs/images/guides/other/guideSeriesHackGatheredLines_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -347,7 +347,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (605.6320714892248, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (605.6320714892248, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -367,7 +367,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="605.6320714892248" height="424.0">
             </rect>
           </clipPath>
@@ -447,6 +447,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/other/guideSeriesHackLinesPlot.svg b/docs/images/guides/other/guideSeriesHackLinesPlot.svg
index 696ab000c..d6d110d3c 100644
--- a/docs/images/guides/other/guideSeriesHackLinesPlot.svg
+++ b/docs/images/guides/other/guideSeriesHackLinesPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -183,7 +183,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -207,19 +207,19 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="654.9652987797186" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="23.034701220281416" y="0.0" width="654.9652987797186" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="23.034701220281416" y="0.0" width="654.9652987797186" height="424.0">
             </rect>
           </clipPath>
@@ -405,6 +405,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/other/guideSeriesHackLinesPlot_dark.svg b/docs/images/guides/other/guideSeriesHackLinesPlot_dark.svg
index e79f2cd37..07aac7eb3 100644
--- a/docs/images/guides/other/guideSeriesHackLinesPlot_dark.svg
+++ b/docs/images/guides/other/guideSeriesHackLinesPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -347,7 +347,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -371,19 +371,19 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="654.9652987797186" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="23.034701220281416" y="0.0" width="654.9652987797186" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="23.034701220281416" y="0.0" width="654.9652987797186" height="424.0">
             </rect>
           </clipPath>
@@ -405,6 +405,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/basicsGlobalXYBoxplotWithFreeScale.svg b/docs/images/guides/quickStartGuide/basicsGlobalXYBoxplotWithFreeScale.svg
index ab4a88e6d..0f503d891 100644
--- a/docs/images/guides/quickStartGuide/basicsGlobalXYBoxplotWithFreeScale.svg
+++ b/docs/images/guides/quickStartGuide/basicsGlobalXYBoxplotWithFreeScale.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -215,7 +215,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="654.9652987797186" height="424.0">
             </rect>
           </clipPath>
@@ -347,6 +347,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/basicsGlobalXYBoxplotWithFreeScale_dark.svg b/docs/images/guides/quickStartGuide/basicsGlobalXYBoxplotWithFreeScale_dark.svg
index 376768ace..00f91ae00 100644
--- a/docs/images/guides/quickStartGuide/basicsGlobalXYBoxplotWithFreeScale_dark.svg
+++ b/docs/images/guides/quickStartGuide/basicsGlobalXYBoxplotWithFreeScale_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -281,7 +281,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="654.9652987797186" height="424.0">
             </rect>
           </clipPath>
@@ -347,6 +347,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/basicsGlobalXYConfigureAxisScales.svg b/docs/images/guides/quickStartGuide/basicsGlobalXYConfigureAxisScales.svg
index 46435854c..56bf1dfde 100644
--- a/docs/images/guides/quickStartGuide/basicsGlobalXYConfigureAxisScales.svg
+++ b/docs/images/guides/quickStartGuide/basicsGlobalXYConfigureAxisScales.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (575.9055936114218, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (575.9055936114218, 424.0)]">
         <g transform="translate(31.015306675749617 0.0 ) ">
           <g>
             <g>
@@ -194,7 +194,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.015306675749617" y="0.0" width="575.9055936114218" height="424.0">
             </rect>
           </clipPath>
@@ -393,6 +393,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/basicsGlobalXYConfigureAxisScalesWithAltApi.svg b/docs/images/guides/quickStartGuide/basicsGlobalXYConfigureAxisScalesWithAltApi.svg
index 61cfadc89..2b1eafba1 100644
--- a/docs/images/guides/quickStartGuide/basicsGlobalXYConfigureAxisScalesWithAltApi.svg
+++ b/docs/images/guides/quickStartGuide/basicsGlobalXYConfigureAxisScalesWithAltApi.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -183,7 +183,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (583.88619906689, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (583.88619906689, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -202,7 +202,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="583.88619906689" height="424.0">
             </rect>
           </clipPath>
@@ -433,6 +433,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/basicsGlobalXYConfigureAxisScalesWithAltApi_dark.svg b/docs/images/guides/quickStartGuide/basicsGlobalXYConfigureAxisScalesWithAltApi_dark.svg
index 11578cd59..cffc76d57 100644
--- a/docs/images/guides/quickStartGuide/basicsGlobalXYConfigureAxisScalesWithAltApi_dark.svg
+++ b/docs/images/guides/quickStartGuide/basicsGlobalXYConfigureAxisScalesWithAltApi_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -347,7 +347,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (583.88619906689, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (583.88619906689, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -366,7 +366,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="583.88619906689" height="424.0">
             </rect>
           </clipPath>
@@ -433,6 +433,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/basicsGlobalXYConfigureAxisScales_dark.svg b/docs/images/guides/quickStartGuide/basicsGlobalXYConfigureAxisScales_dark.svg
index c45d1a131..65de54153 100644
--- a/docs/images/guides/quickStartGuide/basicsGlobalXYConfigureAxisScales_dark.svg
+++ b/docs/images/guides/quickStartGuide/basicsGlobalXYConfigureAxisScales_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -307,7 +307,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (575.9055936114218, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (575.9055936114218, 424.0)]">
         <g transform="translate(31.015306675749617 0.0 ) ">
           <g>
             <g>
@@ -326,7 +326,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.015306675749617" y="0.0" width="575.9055936114218" height="424.0">
             </rect>
           </clipPath>
@@ -393,6 +393,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/basicsGlobalXYPlotLine.svg b/docs/images/guides/quickStartGuide/basicsGlobalXYPlotLine.svg
index 3e44eb470..23a171a35 100644
--- a/docs/images/guides/quickStartGuide/basicsGlobalXYPlotLine.svg
+++ b/docs/images/guides/quickStartGuide/basicsGlobalXYPlotLine.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (583.88619906689, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (583.88619906689, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -198,13 +198,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="583.88619906689" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="23.034701220281416" y="0.0" width="583.88619906689" height="424.0">
             </rect>
           </clipPath>
@@ -394,6 +394,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/basicsGlobalXYPlotLine_dark.svg b/docs/images/guides/quickStartGuide/basicsGlobalXYPlotLine_dark.svg
index 24477a9b4..b2e89ad6b 100644
--- a/docs/images/guides/quickStartGuide/basicsGlobalXYPlotLine_dark.svg
+++ b/docs/images/guides/quickStartGuide/basicsGlobalXYPlotLine_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -296,7 +296,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (583.88619906689, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (583.88619906689, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -321,13 +321,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="583.88619906689" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="23.034701220281416" y="0.0" width="583.88619906689" height="424.0">
             </rect>
           </clipPath>
@@ -394,6 +394,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/basicsLayersCustomizedScales.svg b/docs/images/guides/quickStartGuide/basicsLayersCustomizedScales.svg
index 811dee450..3a1069f4e 100644
--- a/docs/images/guides/quickStartGuide/basicsLayersCustomizedScales.svg
+++ b/docs/images/guides/quickStartGuide/basicsLayersCustomizedScales.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -177,7 +177,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (515.0517853097541, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (515.0517853097541, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -196,7 +196,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="515.0517853097541" height="424.0">
             </rect>
           </clipPath>
@@ -525,6 +525,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/basicsLayersCustomizedScales_dark.svg b/docs/images/guides/quickStartGuide/basicsLayersCustomizedScales_dark.svg
index 88ac25e27..1722086d6 100644
--- a/docs/images/guides/quickStartGuide/basicsLayersCustomizedScales_dark.svg
+++ b/docs/images/guides/quickStartGuide/basicsLayersCustomizedScales_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -314,7 +314,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (515.0517853097541, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (515.0517853097541, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -333,7 +333,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="515.0517853097541" height="424.0">
             </rect>
           </clipPath>
@@ -525,6 +525,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/basicsLayersPlotWithCustomScales.svg b/docs/images/guides/quickStartGuide/basicsLayersPlotWithCustomScales.svg
index f6800fd12..c794cd58b 100644
--- a/docs/images/guides/quickStartGuide/basicsLayersPlotWithCustomScales.svg
+++ b/docs/images/guides/quickStartGuide/basicsLayersPlotWithCustomScales.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (583.88619906689, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (583.88619906689, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -213,7 +213,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="583.88619906689" height="424.0">
             </rect>
           </clipPath>
@@ -407,6 +407,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/basicsLayersPlotWithCustomScales_dark.svg b/docs/images/guides/quickStartGuide/basicsLayersPlotWithCustomScales_dark.svg
index c55aab43d..60eb5dfc8 100644
--- a/docs/images/guides/quickStartGuide/basicsLayersPlotWithCustomScales_dark.svg
+++ b/docs/images/guides/quickStartGuide/basicsLayersPlotWithCustomScales_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -294,7 +294,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (583.88619906689, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (583.88619906689, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -334,7 +334,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="583.88619906689" height="424.0">
             </rect>
           </clipPath>
@@ -407,6 +407,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/basicsPlotCreationHumidityData.svg b/docs/images/guides/quickStartGuide/basicsPlotCreationHumidityData.svg
index b8803cb72..72d5b0f06 100644
--- a/docs/images/guides/quickStartGuide/basicsPlotCreationHumidityData.svg
+++ b/docs/images/guides/quickStartGuide/basicsPlotCreationHumidityData.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (583.88619906689, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (583.88619906689, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -186,7 +186,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="583.88619906689" height="424.0">
             </rect>
           </clipPath>
@@ -353,6 +353,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/basicsPlotCreationHumidityData_dark.svg b/docs/images/guides/quickStartGuide/basicsPlotCreationHumidityData_dark.svg
index 007c98290..e4fa26ead 100644
--- a/docs/images/guides/quickStartGuide/basicsPlotCreationHumidityData_dark.svg
+++ b/docs/images/guides/quickStartGuide/basicsPlotCreationHumidityData_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -267,7 +267,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (583.88619906689, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (583.88619906689, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -286,7 +286,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="583.88619906689" height="424.0">
             </rect>
           </clipPath>
@@ -353,6 +353,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/basicsRawSourceDaysPerMonthBarPlot.svg b/docs/images/guides/quickStartGuide/basicsRawSourceDaysPerMonthBarPlot.svg
index fc565d9e4..d24506479 100644
--- a/docs/images/guides/quickStartGuide/basicsRawSourceDaysPerMonthBarPlot.svg
+++ b/docs/images/guides/quickStartGuide/basicsRawSourceDaysPerMonthBarPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -181,7 +181,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (571.3022207311019, 365.73695078369224)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (571.3022207311019, 365.73695078369224)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -213,7 +213,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="571.3022207311019" height="365.73695078369224">
             </rect>
           </clipPath>
@@ -471,6 +471,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/basicsRawSourceDaysPerMonthBarPlot_dark.svg b/docs/images/guides/quickStartGuide/basicsRawSourceDaysPerMonthBarPlot_dark.svg
index e7add3fd7..023d6fdbd 100644
--- a/docs/images/guides/quickStartGuide/basicsRawSourceDaysPerMonthBarPlot_dark.svg
+++ b/docs/images/guides/quickStartGuide/basicsRawSourceDaysPerMonthBarPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -344,7 +344,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (571.3022207311019, 365.73695078369224)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (571.3022207311019, 365.73695078369224)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -376,7 +376,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="571.3022207311019" height="365.73695078369224">
             </rect>
           </clipPath>
@@ -471,6 +471,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/basicsScaleParamTimeHumidityGraph.svg b/docs/images/guides/quickStartGuide/basicsScaleParamTimeHumidityGraph.svg
index e0b01a7dc..d90191440 100644
--- a/docs/images/guides/quickStartGuide/basicsScaleParamTimeHumidityGraph.svg
+++ b/docs/images/guides/quickStartGuide/basicsScaleParamTimeHumidityGraph.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -161,7 +161,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (31.796181731634725, 0.0), (507.3339706766042, 409.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (31.796181731634725, 0.0), (507.3339706766042, 409.0)]">
         <g transform="translate(31.796181731634725 0.0 ) ">
           <g>
             <g>
@@ -180,7 +180,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.796181731634725" y="0.0" width="507.3339706766042" height="409.0">
             </rect>
           </clipPath>
@@ -392,6 +392,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/basicsScaleParamTimeHumidityGraph_dark.svg b/docs/images/guides/quickStartGuide/basicsScaleParamTimeHumidityGraph_dark.svg
index 127899e4d..e36d717cd 100644
--- a/docs/images/guides/quickStartGuide/basicsScaleParamTimeHumidityGraph_dark.svg
+++ b/docs/images/guides/quickStartGuide/basicsScaleParamTimeHumidityGraph_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -240,7 +240,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (31.796181731634725, 0.0), (507.3339706766042, 409.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (31.796181731634725, 0.0), (507.3339706766042, 409.0)]">
         <g transform="translate(31.796181731634725 0.0 ) ">
           <g>
             <g>
@@ -259,7 +259,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.796181731634725" y="0.0" width="507.3339706766042" height="409.0">
             </rect>
           </clipPath>
@@ -392,6 +392,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalCustomScalesCategoricalColor.svg b/docs/images/guides/quickStartGuide/experimentalCustomScalesCategoricalColor.svg
index f5c4abcb4..9caeb51d8 100644
--- a/docs/images/guides/quickStartGuide/experimentalCustomScalesCategoricalColor.svg
+++ b/docs/images/guides/quickStartGuide/experimentalCustomScalesCategoricalColor.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -415,7 +415,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -607,6 +607,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalCustomScalesCategoricalColorBrewer.svg b/docs/images/guides/quickStartGuide/experimentalCustomScalesCategoricalColorBrewer.svg
index a237b506d..4d6f76a3a 100644
--- a/docs/images/guides/quickStartGuide/experimentalCustomScalesCategoricalColorBrewer.svg
+++ b/docs/images/guides/quickStartGuide/experimentalCustomScalesCategoricalColorBrewer.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -415,7 +415,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -607,6 +607,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalCustomScalesCategoricalColorBrewer_dark.svg b/docs/images/guides/quickStartGuide/experimentalCustomScalesCategoricalColorBrewer_dark.svg
index 3b916a3c4..c88220635 100644
--- a/docs/images/guides/quickStartGuide/experimentalCustomScalesCategoricalColorBrewer_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalCustomScalesCategoricalColorBrewer_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -607,6 +607,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalCustomScalesCategoricalColor_dark.svg b/docs/images/guides/quickStartGuide/experimentalCustomScalesCategoricalColor_dark.svg
index 6d07ed542..ce0da5347 100644
--- a/docs/images/guides/quickStartGuide/experimentalCustomScalesCategoricalColor_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalCustomScalesCategoricalColor_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -607,6 +607,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalCustomScalesContinuousColorGradient2.svg b/docs/images/guides/quickStartGuide/experimentalCustomScalesContinuousColorGradient2.svg
index ebf0589a7..73d5d460f 100644
--- a/docs/images/guides/quickStartGuide/experimentalCustomScalesContinuousColorGradient2.svg
+++ b/docs/images/guides/quickStartGuide/experimentalCustomScalesContinuousColorGradient2.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (607.0872754503931, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (607.0872754503931, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -415,7 +415,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="607.0872754503931" height="424.0">
             </rect>
           </clipPath>
@@ -655,6 +655,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalCustomScalesContinuousColorGradient2_dark.svg b/docs/images/guides/quickStartGuide/experimentalCustomScalesContinuousColorGradient2_dark.svg
index 8eb0dfcac..517f6b60e 100644
--- a/docs/images/guides/quickStartGuide/experimentalCustomScalesContinuousColorGradient2_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalCustomScalesContinuousColorGradient2_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (607.0872754503931, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (607.0872754503931, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="607.0872754503931" height="424.0">
             </rect>
           </clipPath>
@@ -655,6 +655,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalCustomScalesContinuousColorGradientN.svg b/docs/images/guides/quickStartGuide/experimentalCustomScalesContinuousColorGradientN.svg
index dbfacc350..f5f137eca 100644
--- a/docs/images/guides/quickStartGuide/experimentalCustomScalesContinuousColorGradientN.svg
+++ b/docs/images/guides/quickStartGuide/experimentalCustomScalesContinuousColorGradientN.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (607.0872754503931, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (607.0872754503931, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -415,7 +415,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="607.0872754503931" height="424.0">
             </rect>
           </clipPath>
@@ -655,6 +655,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalCustomScalesContinuousColorGradientN_dark.svg b/docs/images/guides/quickStartGuide/experimentalCustomScalesContinuousColorGradientN_dark.svg
index 9761f2a3c..b8685cc11 100644
--- a/docs/images/guides/quickStartGuide/experimentalCustomScalesContinuousColorGradientN_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalCustomScalesContinuousColorGradientN_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (607.0872754503931, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (607.0872754503931, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="607.0872754503931" height="424.0">
             </rect>
           </clipPath>
@@ -655,6 +655,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalCustomScalesContinuousColorGrey.svg b/docs/images/guides/quickStartGuide/experimentalCustomScalesContinuousColorGrey.svg
index 74a2347e8..b0754d5a8 100644
--- a/docs/images/guides/quickStartGuide/experimentalCustomScalesContinuousColorGrey.svg
+++ b/docs/images/guides/quickStartGuide/experimentalCustomScalesContinuousColorGrey.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (607.0872754503931, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (607.0872754503931, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -415,7 +415,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="607.0872754503931" height="424.0">
             </rect>
           </clipPath>
@@ -655,6 +655,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalCustomScalesContinuousColorGrey_dark.svg b/docs/images/guides/quickStartGuide/experimentalCustomScalesContinuousColorGrey_dark.svg
index fce0b6f14..da6ddaa66 100644
--- a/docs/images/guides/quickStartGuide/experimentalCustomScalesContinuousColorGrey_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalCustomScalesContinuousColorGrey_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (607.0872754503931, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (607.0872754503931, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="607.0872754503931" height="424.0">
             </rect>
           </clipPath>
@@ -655,6 +655,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalExportPlotForExport.svg b/docs/images/guides/quickStartGuide/experimentalExportPlotForExport.svg
index 1e6443681..99996ebef 100644
--- a/docs/images/guides/quickStartGuide/experimentalExportPlotForExport.svg
+++ b/docs/images/guides/quickStartGuide/experimentalExportPlotForExport.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 408.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -415,7 +415,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="408.0">
             </rect>
           </clipPath>
@@ -612,6 +612,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalExportPlotForExport_dark.svg b/docs/images/guides/quickStartGuide/experimentalExportPlotForExport_dark.svg
index 477c5d423..d5c4fa210 100644
--- a/docs/images/guides/quickStartGuide/experimentalExportPlotForExport_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalExportPlotForExport_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 408.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="408.0">
             </rect>
           </clipPath>
@@ -612,6 +612,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalLayoutCustomStyleBlankAxes.svg b/docs/images/guides/quickStartGuide/experimentalLayoutCustomStyleBlankAxes.svg
index 83a5b82af..cc739c548 100644
--- a/docs/images/guides/quickStartGuide/experimentalLayoutCustomStyleBlankAxes.svg
+++ b/docs/images/guides/quickStartGuide/experimentalLayoutCustomStyleBlankAxes.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(6.0 6.0 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (693.0, 458.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (693.0, 458.0)]">
         <g transform="">
           <g>
             <g>
@@ -419,7 +419,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="693.0" height="458.0">
             </rect>
           </clipPath>
@@ -431,6 +431,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalLayoutCustomStyleBlankAxes_dark.svg b/docs/images/guides/quickStartGuide/experimentalLayoutCustomStyleBlankAxes_dark.svg
index 9703495d6..7b3a87f07 100644
--- a/docs/images/guides/quickStartGuide/experimentalLayoutCustomStyleBlankAxes_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalLayoutCustomStyleBlankAxes_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(6.0 6.0 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (693.0, 458.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (693.0, 458.0)]">
         <g transform="">
           <g>
             <g>
@@ -419,7 +419,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="693.0" height="458.0">
             </rect>
           </clipPath>
@@ -431,6 +431,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalLayoutPlotAllStyles.svg b/docs/images/guides/quickStartGuide/experimentalLayoutPlotAllStyles.svg
index 549a771dc..b2213e588 100644
--- a/docs/images/guides/quickStartGuide/experimentalLayoutPlotAllStyles.svg
+++ b/docs/images/guides/quickStartGuide/experimentalLayoutPlotAllStyles.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="799.9999999999999" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -367,7 +367,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -613,7 +613,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="21.961210910936405" y="0.0" width="393.0387890890636" height="197.99999999999994">
               </rect>
             </clipPath>
@@ -640,7 +640,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="452.0" y="6.0">
@@ -655,117 +655,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -774,7 +774,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -911,7 +911,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1157,7 +1157,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="21.961210910936405" y="0.0" width="393.0387890890636" height="197.99999999999994">
               </rect>
             </clipPath>
@@ -1186,7 +1186,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="6.0" y="269.99999999999994">
@@ -1201,117 +1201,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx7 .plot-title {
+#_sample_helper_static_id_prefix_7 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx7 .plot-subtitle {
+#_sample_helper_static_id_prefix_7 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .plot-caption {
+#_sample_helper_static_id_prefix_7 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .hyperlink-element {
+#_sample_helper_static_id_prefix_7 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx7 .legend-title {
+#_sample_helper_static_id_prefix_7 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .legend-item {
+#_sample_helper_static_id_prefix_7 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-x {
+#_sample_helper_static_id_prefix_7 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-x {
+#_sample_helper_static_id_prefix_7 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-y {
+#_sample_helper_static_id_prefix_7 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-y {
+#_sample_helper_static_id_prefix_7 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-text {
+#_sample_helper_static_id_prefix_9 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-title {
+#_sample_helper_static_id_prefix_9 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-label {
+#_sample_helper_static_id_prefix_9 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1320,7 +1320,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx7">
+    <g id="_sample_helper_static_id_prefix_7">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1457,7 +1457,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1703,7 +1703,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx8">
+            <clipPath id="_sample_helper_static_id_prefix_8">
               <rect x="21.961210910936405" y="0.0" width="393.0387890890636" height="197.99999999999994">
               </rect>
             </clipPath>
@@ -1732,7 +1732,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx9">
+    <g id="_sample_helper_static_id_prefix_9">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="452.0" y="269.99999999999994">
@@ -1747,117 +1747,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx10 .plot-title {
+#_sample_helper_static_id_prefix_10 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx10 .plot-subtitle {
+#_sample_helper_static_id_prefix_10 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .plot-caption {
+#_sample_helper_static_id_prefix_10 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .hyperlink-element {
+#_sample_helper_static_id_prefix_10 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx10 .legend-title {
+#_sample_helper_static_id_prefix_10 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .legend-item {
+#_sample_helper_static_id_prefix_10 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-title-x {
+#_sample_helper_static_id_prefix_10 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .axis-text-x {
+#_sample_helper_static_id_prefix_10 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-title-y {
+#_sample_helper_static_id_prefix_10 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .axis-text-y {
+#_sample_helper_static_id_prefix_10 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_10 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_10 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-text {
+#_sample_helper_static_id_prefix_12 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-title {
+#_sample_helper_static_id_prefix_12 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-label {
+#_sample_helper_static_id_prefix_12 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1866,7 +1866,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx10">
+    <g id="_sample_helper_static_id_prefix_10">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1983,7 +1983,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 201.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 201.99999999999994)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -2229,7 +2229,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx11">
+            <clipPath id="_sample_helper_static_id_prefix_11">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="201.99999999999994">
               </rect>
             </clipPath>
@@ -2256,7 +2256,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx12">
+    <g id="_sample_helper_static_id_prefix_12">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="6.0" y="533.9999999999999">
@@ -2271,117 +2271,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx13 .plot-title {
+#_sample_helper_static_id_prefix_13 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx13 .plot-subtitle {
+#_sample_helper_static_id_prefix_13 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .plot-caption {
+#_sample_helper_static_id_prefix_13 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .hyperlink-element {
+#_sample_helper_static_id_prefix_13 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx13 .legend-title {
+#_sample_helper_static_id_prefix_13 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .legend-item {
+#_sample_helper_static_id_prefix_13 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .axis-title-x {
+#_sample_helper_static_id_prefix_13 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .axis-text-x {
+#_sample_helper_static_id_prefix_13 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_15 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .axis-title-y {
+#_sample_helper_static_id_prefix_13 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .axis-text-y {
+#_sample_helper_static_id_prefix_13 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_15 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_13 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_13 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .tooltip-text {
+#_sample_helper_static_id_prefix_15 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .tooltip-title {
+#_sample_helper_static_id_prefix_15 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .tooltip-label {
+#_sample_helper_static_id_prefix_15 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -2390,7 +2390,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx13">
+    <g id="_sample_helper_static_id_prefix_13">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -2503,7 +2503,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 197.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 197.99999999999994)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -2749,7 +2749,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx14">
+            <clipPath id="_sample_helper_static_id_prefix_14">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="197.99999999999994">
               </rect>
             </clipPath>
@@ -2776,7 +2776,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx15">
+    <g id="_sample_helper_static_id_prefix_15">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="452.0" y="533.9999999999999">
@@ -2791,117 +2791,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx16 .plot-title {
+#_sample_helper_static_id_prefix_16 .plot-title {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx16 .plot-subtitle {
+#_sample_helper_static_id_prefix_16 .plot-subtitle {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx16 .plot-caption {
+#_sample_helper_static_id_prefix_16 .plot-caption {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .hyperlink-element {
+#_sample_helper_static_id_prefix_16 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx16 .legend-title {
+#_sample_helper_static_id_prefix_16 .legend-title {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx16 .legend-item {
+#_sample_helper_static_id_prefix_16 .legend-item {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-title-x {
+#_sample_helper_static_id_prefix_16 .axis-title-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx16 .axis-text-x {
+#_sample_helper_static_id_prefix_16 .axis-text-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_18 .axis-tooltip-text-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-title-y {
+#_sample_helper_static_id_prefix_16 .axis-title-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx16 .axis-text-y {
+#_sample_helper_static_id_prefix_16 .axis-text-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_18 .axis-tooltip-text-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_16 .facet-strip-text-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_16 .facet-strip-text-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .tooltip-text {
+#_sample_helper_static_id_prefix_18 .tooltip-text {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .tooltip-title {
+#_sample_helper_static_id_prefix_18 .tooltip-title {
 fill: #0000ff;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .tooltip-label {
+#_sample_helper_static_id_prefix_18 .tooltip-label {
 fill: #0000ff;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -2910,7 +2910,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx16">
+    <g id="_sample_helper_static_id_prefix_16">
       <path fill-rule="evenodd" fill="rgb(173,216,230)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -3051,7 +3051,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx17)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_17)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -3297,7 +3297,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx17">
+            <clipPath id="_sample_helper_static_id_prefix_17">
               <rect x="21.961210910936405" y="0.0" width="393.0387890890636" height="197.99999999999994">
               </rect>
             </clipPath>
@@ -3326,7 +3326,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(0,0,255)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx18">
+    <g id="_sample_helper_static_id_prefix_18">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalLayoutPlotAllStyles_dark.svg b/docs/images/guides/quickStartGuide/experimentalLayoutPlotAllStyles_dark.svg
index 92c646f8b..3af494aaa 100644
--- a/docs/images/guides/quickStartGuide/experimentalLayoutPlotAllStyles_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalLayoutPlotAllStyles_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="799.9999999999999" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -367,7 +367,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -613,7 +613,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="21.961210910936405" y="0.0" width="393.0387890890636" height="197.99999999999994">
               </rect>
             </clipPath>
@@ -640,7 +640,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="452.0" y="6.0">
@@ -655,117 +655,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -774,7 +774,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -911,7 +911,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1157,7 +1157,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="21.961210910936405" y="0.0" width="393.0387890890636" height="197.99999999999994">
               </rect>
             </clipPath>
@@ -1186,7 +1186,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="6.0" y="269.99999999999994">
@@ -1201,117 +1201,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx7 .plot-title {
+#_sample_helper_static_id_prefix_7 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx7 .plot-subtitle {
+#_sample_helper_static_id_prefix_7 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .plot-caption {
+#_sample_helper_static_id_prefix_7 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .hyperlink-element {
+#_sample_helper_static_id_prefix_7 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx7 .legend-title {
+#_sample_helper_static_id_prefix_7 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .legend-item {
+#_sample_helper_static_id_prefix_7 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-x {
+#_sample_helper_static_id_prefix_7 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-x {
+#_sample_helper_static_id_prefix_7 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-y {
+#_sample_helper_static_id_prefix_7 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-y {
+#_sample_helper_static_id_prefix_7 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-text {
+#_sample_helper_static_id_prefix_9 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-title {
+#_sample_helper_static_id_prefix_9 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-label {
+#_sample_helper_static_id_prefix_9 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1320,7 +1320,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx7">
+    <g id="_sample_helper_static_id_prefix_7">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1457,7 +1457,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1703,7 +1703,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx8">
+            <clipPath id="_sample_helper_static_id_prefix_8">
               <rect x="21.961210910936405" y="0.0" width="393.0387890890636" height="197.99999999999994">
               </rect>
             </clipPath>
@@ -1732,7 +1732,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx9">
+    <g id="_sample_helper_static_id_prefix_9">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="452.0" y="269.99999999999994">
@@ -1747,117 +1747,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx10 .plot-title {
+#_sample_helper_static_id_prefix_10 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx10 .plot-subtitle {
+#_sample_helper_static_id_prefix_10 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .plot-caption {
+#_sample_helper_static_id_prefix_10 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .hyperlink-element {
+#_sample_helper_static_id_prefix_10 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx10 .legend-title {
+#_sample_helper_static_id_prefix_10 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .legend-item {
+#_sample_helper_static_id_prefix_10 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-title-x {
+#_sample_helper_static_id_prefix_10 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .axis-text-x {
+#_sample_helper_static_id_prefix_10 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-title-y {
+#_sample_helper_static_id_prefix_10 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx10 .axis-text-y {
+#_sample_helper_static_id_prefix_10 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_12 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_10 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_10 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-text {
+#_sample_helper_static_id_prefix_12 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-title {
+#_sample_helper_static_id_prefix_12 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx12 .tooltip-label {
+#_sample_helper_static_id_prefix_12 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1866,7 +1866,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx10">
+    <g id="_sample_helper_static_id_prefix_10">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -1983,7 +1983,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 201.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 201.99999999999994)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -2229,7 +2229,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx11">
+            <clipPath id="_sample_helper_static_id_prefix_11">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="201.99999999999994">
               </rect>
             </clipPath>
@@ -2256,7 +2256,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx12">
+    <g id="_sample_helper_static_id_prefix_12">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="6.0" y="533.9999999999999">
@@ -2271,117 +2271,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx13 .plot-title {
+#_sample_helper_static_id_prefix_13 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx13 .plot-subtitle {
+#_sample_helper_static_id_prefix_13 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .plot-caption {
+#_sample_helper_static_id_prefix_13 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .hyperlink-element {
+#_sample_helper_static_id_prefix_13 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx13 .legend-title {
+#_sample_helper_static_id_prefix_13 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .legend-item {
+#_sample_helper_static_id_prefix_13 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .axis-title-x {
+#_sample_helper_static_id_prefix_13 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .axis-text-x {
+#_sample_helper_static_id_prefix_13 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_15 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .axis-title-y {
+#_sample_helper_static_id_prefix_13 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx13 .axis-text-y {
+#_sample_helper_static_id_prefix_13 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_15 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_13 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_13 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .tooltip-text {
+#_sample_helper_static_id_prefix_15 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .tooltip-title {
+#_sample_helper_static_id_prefix_15 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx15 .tooltip-label {
+#_sample_helper_static_id_prefix_15 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -2390,7 +2390,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx13">
+    <g id="_sample_helper_static_id_prefix_13">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -2503,7 +2503,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 197.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 197.99999999999994)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -2749,7 +2749,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx14">
+            <clipPath id="_sample_helper_static_id_prefix_14">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="197.99999999999994">
               </rect>
             </clipPath>
@@ -2776,7 +2776,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx15">
+    <g id="_sample_helper_static_id_prefix_15">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="259.99999999999994" x="452.0" y="533.9999999999999">
@@ -2791,117 +2791,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx16 .plot-title {
+#_sample_helper_static_id_prefix_16 .plot-title {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx16 .plot-subtitle {
+#_sample_helper_static_id_prefix_16 .plot-subtitle {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx16 .plot-caption {
+#_sample_helper_static_id_prefix_16 .plot-caption {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .hyperlink-element {
+#_sample_helper_static_id_prefix_16 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx16 .legend-title {
+#_sample_helper_static_id_prefix_16 .legend-title {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx16 .legend-item {
+#_sample_helper_static_id_prefix_16 .legend-item {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-title-x {
+#_sample_helper_static_id_prefix_16 .axis-title-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx16 .axis-text-x {
+#_sample_helper_static_id_prefix_16 .axis-text-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_18 .axis-tooltip-text-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .axis-title-y {
+#_sample_helper_static_id_prefix_16 .axis-title-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx16 .axis-text-y {
+#_sample_helper_static_id_prefix_16 .axis-text-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_18 .axis-tooltip-text-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_16 .facet-strip-text-x {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx16 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_16 .facet-strip-text-y {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .tooltip-text {
+#_sample_helper_static_id_prefix_18 .tooltip-text {
 fill: #0000ff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .tooltip-title {
+#_sample_helper_static_id_prefix_18 .tooltip-title {
 fill: #0000ff;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx18 .tooltip-label {
+#_sample_helper_static_id_prefix_18 .tooltip-label {
 fill: #0000ff;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -2910,7 +2910,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx16">
+    <g id="_sample_helper_static_id_prefix_16">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -3051,7 +3051,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx17)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_17)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (393.0387890890636, 197.99999999999994)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -3297,7 +3297,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx17">
+            <clipPath id="_sample_helper_static_id_prefix_17">
               <rect x="21.961210910936405" y="0.0" width="393.0387890890636" height="197.99999999999994">
               </rect>
             </clipPath>
@@ -3326,7 +3326,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(0,0,255)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 259.99999999999994 L442.0 259.99999999999994 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx18">
+    <g id="_sample_helper_static_id_prefix_18">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalLayoutSimpleCustomStyle.svg b/docs/images/guides/quickStartGuide/experimentalLayoutSimpleCustomStyle.svg
index 281f6abaf..33422072f 100644
--- a/docs/images/guides/quickStartGuide/experimentalLayoutSimpleCustomStyle.svg
+++ b/docs/images/guides/quickStartGuide/experimentalLayoutSimpleCustomStyle.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -268,7 +268,7 @@ font-size: 13.0px;
           </line>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 428.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 428.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -514,7 +514,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="428.0">
             </rect>
           </clipPath>
@@ -536,6 +536,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalLayoutSimpleCustomStyle_dark.svg b/docs/images/guides/quickStartGuide/experimentalLayoutSimpleCustomStyle_dark.svg
index 69fe0e6a5..6e1e02737 100644
--- a/docs/images/guides/quickStartGuide/experimentalLayoutSimpleCustomStyle_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalLayoutSimpleCustomStyle_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -268,7 +268,7 @@ font-size: 13.0px;
           </line>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 428.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 428.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -514,7 +514,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="428.0">
             </rect>
           </clipPath>
@@ -536,6 +536,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalLayoutTitleSubtitleCapSize.svg b/docs/images/guides/quickStartGuide/experimentalLayoutTitleSubtitleCapSize.svg
index c476fa840..c201d9d0f 100644
--- a/docs/images/guides/quickStartGuide/experimentalLayoutTitleSubtitleCapSize.svg
+++ b/docs/images/guides/quickStartGuide/experimentalLayoutTitleSubtitleCapSize.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 528.0 L705.0 528.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 41.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 421.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 421.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -415,7 +415,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="421.0">
             </rect>
           </clipPath>
@@ -564,6 +564,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 528.0 L705.0 528.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalLayoutTitleSubtitleCapSize_dark.svg b/docs/images/guides/quickStartGuide/experimentalLayoutTitleSubtitleCapSize_dark.svg
index dcde8f4e3..d92c8b7ef 100644
--- a/docs/images/guides/quickStartGuide/experimentalLayoutTitleSubtitleCapSize_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalLayoutTitleSubtitleCapSize_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 528.0 L705.0 528.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 41.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 421.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 421.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="421.0">
             </rect>
           </clipPath>
@@ -564,6 +564,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 528.0 L705.0 528.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalLayoutWithClassicStyle.svg b/docs/images/guides/quickStartGuide/experimentalLayoutWithClassicStyle.svg
index a6833b7f9..878a690aa 100644
--- a/docs/images/guides/quickStartGuide/experimentalLayoutWithClassicStyle.svg
+++ b/docs/images/guides/quickStartGuide/experimentalLayoutWithClassicStyle.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -268,7 +268,7 @@ font-size: 13.0px;
           </line>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (656.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (656.0387890890636, 424.0)]">
         <g transform="translate(21.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -514,7 +514,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="21.961210910936405" y="0.0" width="656.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -536,6 +536,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalLayoutWithClassicStyle_dark.svg b/docs/images/guides/quickStartGuide/experimentalLayoutWithClassicStyle_dark.svg
index 963e605fd..cdc41bd60 100644
--- a/docs/images/guides/quickStartGuide/experimentalLayoutWithClassicStyle_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalLayoutWithClassicStyle_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -268,7 +268,7 @@ font-size: 13.0px;
           </line>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (656.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (656.0387890890636, 424.0)]">
         <g transform="translate(21.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -514,7 +514,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="21.961210910936405" y="0.0" width="656.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -536,6 +536,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingGrid.svg b/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingGrid.svg
index ea2c5809c..e87006ef0 100644
--- a/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingGrid.svg
+++ b/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingGrid.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_13 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_13 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .tooltip-text {
+#_sample_helper_static_id_prefix_13 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .tooltip-title {
+#_sample_helper_static_id_prefix_13 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .tooltip-label {
+#_sample_helper_static_id_prefix_13 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 423.0 L705.0 423.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -151,7 +151,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (188.36242515013103, 82.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (188.36242515013103, 82.0)]">
         <g transform="translate(17.961210910936405 19.0 ) ">
           <g>
             <g>
@@ -186,7 +186,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="19.0" width="188.36242515013103" height="82.0">
             </rect>
           </clipPath>
@@ -230,7 +230,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (216.32363606106745, 19.0), (188.36242515013103, 82.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (216.32363606106745, 19.0), (188.36242515013103, 82.0)]">
         <g transform="translate(216.32363606106745 19.0 ) ">
           <g>
             <g>
@@ -299,7 +299,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="216.32363606106745" y="19.0" width="188.36242515013103" height="82.0">
             </rect>
           </clipPath>
@@ -336,7 +336,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (414.6860612111985, 19.0), (188.36242515013103, 82.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (414.6860612111985, 19.0), (188.36242515013103, 82.0)]">
         <g transform="translate(414.6860612111985 19.0 ) ">
           <g>
             <g>
@@ -348,7 +348,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="414.6860612111985" y="19.0" width="188.36242515013103" height="82.0">
             </rect>
           </clipPath>
@@ -390,7 +390,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (17.961210910936405, 111.0), (188.36242515013103, 82.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (17.961210910936405, 111.0), (188.36242515013103, 82.0)]">
         <g transform="translate(17.961210910936405 111.0 ) ">
           <g>
             <g>
@@ -402,7 +402,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="17.961210910936405" y="111.0" width="188.36242515013103" height="82.0">
             </rect>
           </clipPath>
@@ -441,7 +441,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (216.32363606106745, 111.0), (188.36242515013103, 82.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (216.32363606106745, 111.0), (188.36242515013103, 82.0)]">
         <g transform="translate(216.32363606106745 111.0 ) ">
           <g>
             <g>
@@ -457,7 +457,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="216.32363606106745" y="111.0" width="188.36242515013103" height="82.0">
             </rect>
           </clipPath>
@@ -489,7 +489,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (414.6860612111985, 111.0), (188.36242515013103, 82.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (414.6860612111985, 111.0), (188.36242515013103, 82.0)]">
         <g transform="translate(414.6860612111985 111.0 ) ">
           <g>
             <g>
@@ -501,7 +501,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx6">
+          <clipPath id="_sample_helper_static_id_prefix_6">
             <rect x="414.6860612111985" y="111.0" width="188.36242515013103" height="82.0">
             </rect>
           </clipPath>
@@ -538,7 +538,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (17.961210910936405, 203.0), (188.36242515013103, 82.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (17.961210910936405, 203.0), (188.36242515013103, 82.0)]">
         <g transform="translate(17.961210910936405 203.0 ) ">
           <g>
             <g>
@@ -582,7 +582,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx7">
+          <clipPath id="_sample_helper_static_id_prefix_7">
             <rect x="17.961210910936405" y="203.0" width="188.36242515013103" height="82.0">
             </rect>
           </clipPath>
@@ -621,7 +621,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (216.32363606106745, 203.0), (188.36242515013103, 82.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (216.32363606106745, 203.0), (188.36242515013103, 82.0)]">
         <g transform="translate(216.32363606106745 203.0 ) ">
           <g>
             <g>
@@ -676,7 +676,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx8">
+          <clipPath id="_sample_helper_static_id_prefix_8">
             <rect x="216.32363606106745" y="203.0" width="188.36242515013103" height="82.0">
             </rect>
           </clipPath>
@@ -708,7 +708,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx9)" clip-bounds-jfx="[rect (414.6860612111985, 203.0), (188.36242515013103, 82.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_9)" clip-bounds-jfx="[rect (414.6860612111985, 203.0), (188.36242515013103, 82.0)]">
         <g transform="translate(414.6860612111985 203.0 ) ">
           <g>
             <g>
@@ -724,7 +724,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx9">
+          <clipPath id="_sample_helper_static_id_prefix_9">
             <rect x="414.6860612111985" y="203.0" width="188.36242515013103" height="82.0">
             </rect>
           </clipPath>
@@ -761,7 +761,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx10)" clip-bounds-jfx="[rect (17.961210910936405, 295.0), (188.36242515013103, 82.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_10)" clip-bounds-jfx="[rect (17.961210910936405, 295.0), (188.36242515013103, 82.0)]">
         <g transform="translate(17.961210910936405 295.0 ) ">
           <g>
             <g>
@@ -821,7 +821,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx10">
+          <clipPath id="_sample_helper_static_id_prefix_10">
             <rect x="17.961210910936405" y="295.0" width="188.36242515013103" height="82.0">
             </rect>
           </clipPath>
@@ -889,7 +889,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (216.32363606106745, 295.0), (188.36242515013103, 82.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (216.32363606106745, 295.0), (188.36242515013103, 82.0)]">
         <g transform="translate(216.32363606106745 295.0 ) ">
           <g>
             <g>
@@ -902,7 +902,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx11">
+          <clipPath id="_sample_helper_static_id_prefix_11">
             <rect x="216.32363606106745" y="295.0" width="188.36242515013103" height="82.0">
             </rect>
           </clipPath>
@@ -963,7 +963,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx12)" clip-bounds-jfx="[rect (414.6860612111985, 295.0), (188.36242515013103, 82.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_12)" clip-bounds-jfx="[rect (414.6860612111985, 295.0), (188.36242515013103, 82.0)]">
         <g transform="translate(414.6860612111985 295.0 ) ">
           <g>
             <g>
@@ -996,7 +996,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx12">
+          <clipPath id="_sample_helper_static_id_prefix_12">
             <rect x="414.6860612111985" y="295.0" width="188.36242515013103" height="82.0">
             </rect>
           </clipPath>
@@ -1226,6 +1226,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 423.0 L705.0 423.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx13">
+  <g id="_sample_helper_static_id_prefix_13">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingGridX.svg b/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingGridX.svg
index f99a0187a..835dc1063 100644
--- a/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingGridX.svg
+++ b/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingGridX.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 423.0 L705.0 423.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -161,7 +161,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (194.69575848346437, 358.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (194.69575848346437, 358.0)]">
         <g transform="translate(17.961210910936405 19.0 ) ">
           <g>
             <g>
@@ -276,7 +276,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="19.0" width="194.69575848346437" height="358.0">
             </rect>
           </clipPath>
@@ -392,7 +392,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (222.6569693944008, 19.0), (194.69575848346437, 358.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (222.6569693944008, 19.0), (194.69575848346437, 358.0)]">
         <g transform="translate(222.6569693944008 19.0 ) ">
           <g>
             <g>
@@ -509,7 +509,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="222.6569693944008" y="19.0" width="194.69575848346437" height="358.0">
             </rect>
           </clipPath>
@@ -574,7 +574,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (427.35272787786516, 19.0), (194.69575848346437, 358.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (427.35272787786516, 19.0), (194.69575848346437, 358.0)]">
         <g transform="translate(427.35272787786516 19.0 ) ">
           <g>
             <g>
@@ -611,7 +611,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="427.35272787786516" y="19.0" width="194.69575848346437" height="358.0">
             </rect>
           </clipPath>
@@ -832,6 +832,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 423.0 L705.0 423.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingGridX_dark.svg b/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingGridX_dark.svg
index 2409ddc34..779164b46 100644
--- a/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingGridX_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingGridX_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 423.0 L705.0 423.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -236,7 +236,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (194.69575848346437, 358.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (194.69575848346437, 358.0)]">
         <g transform="translate(17.961210910936405 19.0 ) ">
           <g>
             <g>
@@ -351,7 +351,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="19.0" width="194.69575848346437" height="358.0">
             </rect>
           </clipPath>
@@ -416,7 +416,7 @@ font-size: 13.0px;
         <g transform="translate(222.6569693944008 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (222.6569693944008, 19.0), (194.69575848346437, 358.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (222.6569693944008, 19.0), (194.69575848346437, 358.0)]">
         <g transform="translate(222.6569693944008 19.0 ) ">
           <g>
             <g>
@@ -533,7 +533,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="222.6569693944008" y="19.0" width="194.69575848346437" height="358.0">
             </rect>
           </clipPath>
@@ -598,7 +598,7 @@ font-size: 13.0px;
         <g transform="translate(427.35272787786516 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (427.35272787786516, 19.0), (194.69575848346437, 358.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (427.35272787786516, 19.0), (194.69575848346437, 358.0)]">
         <g transform="translate(427.35272787786516 19.0 ) ">
           <g>
             <g>
@@ -635,7 +635,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="427.35272787786516" y="19.0" width="194.69575848346437" height="358.0">
             </rect>
           </clipPath>
@@ -832,6 +832,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 423.0 L705.0 423.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingGridY.svg b/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingGridY.svg
index 4d44d8d08..04ec744df 100644
--- a/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingGridY.svg
+++ b/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingGridY.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_5 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_5 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .tooltip-text {
+#_sample_helper_static_id_prefix_5 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .tooltip-title {
+#_sample_helper_static_id_prefix_5 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .tooltip-label {
+#_sample_helper_static_id_prefix_5 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 423.0 L705.0 423.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -157,7 +157,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (585.0872754503931, 86.75)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (585.0872754503931, 86.75)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -249,7 +249,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="585.0872754503931" height="86.75">
             </rect>
           </clipPath>
@@ -299,7 +299,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 96.75), (585.0872754503931, 86.75)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 96.75), (585.0872754503931, 86.75)]">
         <g transform="translate(17.961210910936405 96.75 ) ">
           <g>
             <g>
@@ -315,7 +315,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="96.75" width="585.0872754503931" height="86.75">
             </rect>
           </clipPath>
@@ -365,7 +365,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (17.961210910936405, 193.5), (585.0872754503931, 86.75)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (17.961210910936405, 193.5), (585.0872754503931, 86.75)]">
         <g transform="translate(17.961210910936405 193.5 ) ">
           <g>
             <g>
@@ -456,7 +456,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="17.961210910936405" y="193.5" width="585.0872754503931" height="86.75">
             </rect>
           </clipPath>
@@ -506,7 +506,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (17.961210910936405, 290.25), (585.0872754503931, 86.75)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (17.961210910936405, 290.25), (585.0872754503931, 86.75)]">
         <g transform="translate(17.961210910936405 290.25 ) ">
           <g>
             <g>
@@ -588,7 +588,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="17.961210910936405" y="290.25" width="585.0872754503931" height="86.75">
             </rect>
           </clipPath>
@@ -852,6 +852,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 423.0 L705.0 423.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx5">
+  <g id="_sample_helper_static_id_prefix_5">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingGridY_dark.svg b/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingGridY_dark.svg
index c95e12836..45d3e3df3 100644
--- a/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingGridY_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingGridY_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_5 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_5 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .tooltip-text {
+#_sample_helper_static_id_prefix_5 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .tooltip-title {
+#_sample_helper_static_id_prefix_5 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx5 .tooltip-label {
+#_sample_helper_static_id_prefix_5 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 423.0 L705.0 423.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -168,7 +168,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (585.0872754503931, 86.75)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (585.0872754503931, 86.75)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -260,7 +260,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="585.0872754503931" height="86.75">
             </rect>
           </clipPath>
@@ -310,7 +310,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 96.75), (585.0872754503931, 86.75)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 96.75), (585.0872754503931, 86.75)]">
         <g transform="translate(17.961210910936405 96.75 ) ">
           <g>
             <g>
@@ -326,7 +326,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="96.75" width="585.0872754503931" height="86.75">
             </rect>
           </clipPath>
@@ -376,7 +376,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (17.961210910936405, 193.5), (585.0872754503931, 86.75)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (17.961210910936405, 193.5), (585.0872754503931, 86.75)]">
         <g transform="translate(17.961210910936405 193.5 ) ">
           <g>
             <g>
@@ -467,7 +467,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="17.961210910936405" y="193.5" width="585.0872754503931" height="86.75">
             </rect>
           </clipPath>
@@ -573,7 +573,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (17.961210910936405, 290.25), (585.0872754503931, 86.75)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (17.961210910936405, 290.25), (585.0872754503931, 86.75)]">
         <g transform="translate(17.961210910936405 290.25 ) ">
           <g>
             <g>
@@ -655,7 +655,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="17.961210910936405" y="290.25" width="585.0872754503931" height="86.75">
             </rect>
           </clipPath>
@@ -852,6 +852,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 423.0 L705.0 423.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx5">
+  <g id="_sample_helper_static_id_prefix_5">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingGrid_dark.svg b/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingGrid_dark.svg
index 6a91b47e6..57b171bc7 100644
--- a/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingGrid_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingGrid_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_13 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_13 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .tooltip-text {
+#_sample_helper_static_id_prefix_13 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .tooltip-title {
+#_sample_helper_static_id_prefix_13 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx13 .tooltip-label {
+#_sample_helper_static_id_prefix_13 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 423.0 L705.0 423.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -162,7 +162,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (188.36242515013103, 82.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 19.0), (188.36242515013103, 82.0)]">
         <g transform="translate(17.961210910936405 19.0 ) ">
           <g>
             <g>
@@ -197,7 +197,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="19.0" width="188.36242515013103" height="82.0">
             </rect>
           </clipPath>
@@ -234,7 +234,7 @@ font-size: 13.0px;
         <g transform="translate(216.32363606106745 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (216.32363606106745, 19.0), (188.36242515013103, 82.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (216.32363606106745, 19.0), (188.36242515013103, 82.0)]">
         <g transform="translate(216.32363606106745 19.0 ) ">
           <g>
             <g>
@@ -303,7 +303,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="216.32363606106745" y="19.0" width="188.36242515013103" height="82.0">
             </rect>
           </clipPath>
@@ -340,7 +340,7 @@ font-size: 13.0px;
         <g transform="translate(414.6860612111985 19.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (414.6860612111985, 19.0), (188.36242515013103, 82.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (414.6860612111985, 19.0), (188.36242515013103, 82.0)]">
         <g transform="translate(414.6860612111985 19.0 ) ">
           <g>
             <g>
@@ -352,7 +352,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="414.6860612111985" y="19.0" width="188.36242515013103" height="82.0">
             </rect>
           </clipPath>
@@ -401,7 +401,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (17.961210910936405, 111.0), (188.36242515013103, 82.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (17.961210910936405, 111.0), (188.36242515013103, 82.0)]">
         <g transform="translate(17.961210910936405 111.0 ) ">
           <g>
             <g>
@@ -413,7 +413,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="17.961210910936405" y="111.0" width="188.36242515013103" height="82.0">
             </rect>
           </clipPath>
@@ -445,7 +445,7 @@ font-size: 13.0px;
         <g transform="translate(216.32363606106745 111.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (216.32363606106745, 111.0), (188.36242515013103, 82.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (216.32363606106745, 111.0), (188.36242515013103, 82.0)]">
         <g transform="translate(216.32363606106745 111.0 ) ">
           <g>
             <g>
@@ -461,7 +461,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="216.32363606106745" y="111.0" width="188.36242515013103" height="82.0">
             </rect>
           </clipPath>
@@ -493,7 +493,7 @@ font-size: 13.0px;
         <g transform="translate(414.6860612111985 111.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (414.6860612111985, 111.0), (188.36242515013103, 82.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (414.6860612111985, 111.0), (188.36242515013103, 82.0)]">
         <g transform="translate(414.6860612111985 111.0 ) ">
           <g>
             <g>
@@ -505,7 +505,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx6">
+          <clipPath id="_sample_helper_static_id_prefix_6">
             <rect x="414.6860612111985" y="111.0" width="188.36242515013103" height="82.0">
             </rect>
           </clipPath>
@@ -549,7 +549,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (17.961210910936405, 203.0), (188.36242515013103, 82.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (17.961210910936405, 203.0), (188.36242515013103, 82.0)]">
         <g transform="translate(17.961210910936405 203.0 ) ">
           <g>
             <g>
@@ -593,7 +593,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx7">
+          <clipPath id="_sample_helper_static_id_prefix_7">
             <rect x="17.961210910936405" y="203.0" width="188.36242515013103" height="82.0">
             </rect>
           </clipPath>
@@ -625,7 +625,7 @@ font-size: 13.0px;
         <g transform="translate(216.32363606106745 203.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (216.32363606106745, 203.0), (188.36242515013103, 82.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (216.32363606106745, 203.0), (188.36242515013103, 82.0)]">
         <g transform="translate(216.32363606106745 203.0 ) ">
           <g>
             <g>
@@ -680,7 +680,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx8">
+          <clipPath id="_sample_helper_static_id_prefix_8">
             <rect x="216.32363606106745" y="203.0" width="188.36242515013103" height="82.0">
             </rect>
           </clipPath>
@@ -712,7 +712,7 @@ font-size: 13.0px;
         <g transform="translate(414.6860612111985 203.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx9)" clip-bounds-jfx="[rect (414.6860612111985, 203.0), (188.36242515013103, 82.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_9)" clip-bounds-jfx="[rect (414.6860612111985, 203.0), (188.36242515013103, 82.0)]">
         <g transform="translate(414.6860612111985 203.0 ) ">
           <g>
             <g>
@@ -728,7 +728,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx9">
+          <clipPath id="_sample_helper_static_id_prefix_9">
             <rect x="414.6860612111985" y="203.0" width="188.36242515013103" height="82.0">
             </rect>
           </clipPath>
@@ -801,7 +801,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx10)" clip-bounds-jfx="[rect (17.961210910936405, 295.0), (188.36242515013103, 82.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_10)" clip-bounds-jfx="[rect (17.961210910936405, 295.0), (188.36242515013103, 82.0)]">
         <g transform="translate(17.961210910936405 295.0 ) ">
           <g>
             <g>
@@ -861,7 +861,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx10">
+          <clipPath id="_sample_helper_static_id_prefix_10">
             <rect x="17.961210910936405" y="295.0" width="188.36242515013103" height="82.0">
             </rect>
           </clipPath>
@@ -922,7 +922,7 @@ font-size: 13.0px;
         <g transform="translate(216.32363606106745 295.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (216.32363606106745, 295.0), (188.36242515013103, 82.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (216.32363606106745, 295.0), (188.36242515013103, 82.0)]">
         <g transform="translate(216.32363606106745 295.0 ) ">
           <g>
             <g>
@@ -935,7 +935,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx11">
+          <clipPath id="_sample_helper_static_id_prefix_11">
             <rect x="216.32363606106745" y="295.0" width="188.36242515013103" height="82.0">
             </rect>
           </clipPath>
@@ -996,7 +996,7 @@ font-size: 13.0px;
         <g transform="translate(414.6860612111985 295.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx12)" clip-bounds-jfx="[rect (414.6860612111985, 295.0), (188.36242515013103, 82.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_12)" clip-bounds-jfx="[rect (414.6860612111985, 295.0), (188.36242515013103, 82.0)]">
         <g transform="translate(414.6860612111985 295.0 ) ">
           <g>
             <g>
@@ -1029,7 +1029,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx12">
+          <clipPath id="_sample_helper_static_id_prefix_12">
             <rect x="414.6860612111985" y="295.0" width="188.36242515013103" height="82.0">
             </rect>
           </clipPath>
@@ -1226,6 +1226,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 423.0 L705.0 423.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx13">
+  <g id="_sample_helper_static_id_prefix_13">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingWrap.svg b/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingWrap.svg
index f087df974..1c30733cc 100644
--- a/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingWrap.svg
+++ b/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingWrap.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_10 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_10 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .tooltip-text {
+#_sample_helper_static_id_prefix_10 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .tooltip-title {
+#_sample_helper_static_id_prefix_10 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .tooltip-label {
+#_sample_helper_static_id_prefix_10 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 2.8421709430404007E-14 L0.0 423.0 L705.0 423.0 L705.0 2.8421709430404007E-14 Z">
     </path>
     <g transform="translate(21.0 6.000000000000028 ) ">
@@ -151,7 +151,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 38.0), (182.72161787617344, 68.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 38.0), (182.72161787617344, 68.33333333333333)]">
         <g transform="translate(17.961210910936405 38.0 ) ">
           <g>
             <g>
@@ -211,7 +211,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="38.0" width="182.72161787617344" height="68.33333333333333">
             </rect>
           </clipPath>
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (228.64403969804627, 38.0), (182.72161787617344, 68.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (228.64403969804627, 38.0), (182.72161787617344, 68.33333333333333)]">
         <g transform="translate(228.64403969804627 38.0 ) ">
           <g>
             <g>
@@ -333,7 +333,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="228.64403969804627" y="38.0" width="182.72161787617344" height="68.33333333333333">
             </rect>
           </clipPath>
@@ -409,7 +409,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (439.3268684851561, 38.0), (182.72161787617344, 68.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (439.3268684851561, 38.0), (182.72161787617344, 68.33333333333333)]">
         <g transform="translate(439.3268684851561 38.0 ) ">
           <g>
             <g>
@@ -444,7 +444,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="439.3268684851561" y="38.0" width="182.72161787617344" height="68.33333333333333">
             </rect>
           </clipPath>
@@ -511,7 +511,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (17.961210910936405, 173.33333333333331), (182.72161787617344, 68.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (17.961210910936405, 173.33333333333331), (182.72161787617344, 68.33333333333333)]">
         <g transform="translate(17.961210910936405 173.33333333333331 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="17.961210910936405" y="173.33333333333331" width="182.72161787617344" height="68.33333333333333">
             </rect>
           </clipPath>
@@ -591,7 +591,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (228.64403969804627, 173.33333333333331), (182.72161787617344, 68.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (228.64403969804627, 173.33333333333331), (182.72161787617344, 68.33333333333333)]">
         <g transform="translate(228.64403969804627 173.33333333333331 ) ">
           <g>
             <g>
@@ -646,7 +646,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="228.64403969804627" y="173.33333333333331" width="182.72161787617344" height="68.33333333333333">
             </rect>
           </clipPath>
@@ -715,7 +715,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (439.3268684851561, 173.33333333333331), (182.72161787617344, 68.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (439.3268684851561, 173.33333333333331), (182.72161787617344, 68.33333333333333)]">
         <g transform="translate(439.3268684851561 173.33333333333331 ) ">
           <g>
             <g>
@@ -731,7 +731,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx6">
+          <clipPath id="_sample_helper_static_id_prefix_6">
             <rect x="439.3268684851561" y="173.33333333333331" width="182.72161787617344" height="68.33333333333333">
             </rect>
           </clipPath>
@@ -807,7 +807,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (17.961210910936405, 308.66666666666663), (182.72161787617344, 68.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (17.961210910936405, 308.66666666666663), (182.72161787617344, 68.33333333333333)]">
         <g transform="translate(17.961210910936405 308.66666666666663 ) ">
           <g>
             <g>
@@ -876,7 +876,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx7">
+          <clipPath id="_sample_helper_static_id_prefix_7">
             <rect x="17.961210910936405" y="308.66666666666663" width="182.72161787617344" height="68.33333333333333">
             </rect>
           </clipPath>
@@ -945,7 +945,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (228.64403969804627, 308.66666666666663), (182.72161787617344, 68.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (228.64403969804627, 308.66666666666663), (182.72161787617344, 68.33333333333333)]">
         <g transform="translate(228.64403969804627 308.66666666666663 ) ">
           <g>
             <g>
@@ -978,7 +978,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx8">
+          <clipPath id="_sample_helper_static_id_prefix_8">
             <rect x="228.64403969804627" y="308.66666666666663" width="182.72161787617344" height="68.33333333333333">
             </rect>
           </clipPath>
@@ -1056,7 +1056,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx9)" clip-bounds-jfx="[rect (439.3268684851561, 308.66666666666663), (182.72161787617344, 68.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_9)" clip-bounds-jfx="[rect (439.3268684851561, 308.66666666666663), (182.72161787617344, 68.33333333333333)]">
         <g transform="translate(439.3268684851561 308.66666666666663 ) ">
           <g>
             <g>
@@ -1072,7 +1072,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx9">
+          <clipPath id="_sample_helper_static_id_prefix_9">
             <rect x="439.3268684851561" y="308.66666666666663" width="182.72161787617344" height="68.33333333333333">
             </rect>
           </clipPath>
@@ -1314,6 +1314,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 2.8421709430404007E-14 L0.0 423.0 L705.0 423.0 L705.0 2.8421709430404007E-14 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx10">
+  <g id="_sample_helper_static_id_prefix_10">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingWrap_dark.svg b/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingWrap_dark.svg
index 0a03473fc..8b5ac8a11 100644
--- a/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingWrap_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingWrap_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_10 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_10 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .tooltip-text {
+#_sample_helper_static_id_prefix_10 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .tooltip-title {
+#_sample_helper_static_id_prefix_10 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx10 .tooltip-label {
+#_sample_helper_static_id_prefix_10 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 2.8421709430404007E-14 L0.0 423.0 L705.0 423.0 L705.0 2.8421709430404007E-14 Z">
     </path>
     <g transform="translate(21.0 6.000000000000028 ) ">
@@ -191,7 +191,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 38.0), (182.72161787617344, 68.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 38.0), (182.72161787617344, 68.33333333333333)]">
         <g transform="translate(17.961210910936405 38.0 ) ">
           <g>
             <g>
@@ -251,7 +251,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="38.0" width="182.72161787617344" height="68.33333333333333">
             </rect>
           </clipPath>
@@ -329,7 +329,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (228.64403969804627, 38.0), (182.72161787617344, 68.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (228.64403969804627, 38.0), (182.72161787617344, 68.33333333333333)]">
         <g transform="translate(228.64403969804627 38.0 ) ">
           <g>
             <g>
@@ -373,7 +373,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="228.64403969804627" y="38.0" width="182.72161787617344" height="68.33333333333333">
             </rect>
           </clipPath>
@@ -440,7 +440,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (439.3268684851561, 38.0), (182.72161787617344, 68.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (439.3268684851561, 38.0), (182.72161787617344, 68.33333333333333)]">
         <g transform="translate(439.3268684851561 38.0 ) ">
           <g>
             <g>
@@ -475,7 +475,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="439.3268684851561" y="38.0" width="182.72161787617344" height="68.33333333333333">
             </rect>
           </clipPath>
@@ -542,7 +542,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (17.961210910936405, 173.33333333333331), (182.72161787617344, 68.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (17.961210910936405, 173.33333333333331), (182.72161787617344, 68.33333333333333)]">
         <g transform="translate(17.961210910936405 173.33333333333331 ) ">
           <g>
             <g>
@@ -555,7 +555,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="17.961210910936405" y="173.33333333333331" width="182.72161787617344" height="68.33333333333333">
             </rect>
           </clipPath>
@@ -622,7 +622,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (228.64403969804627, 173.33333333333331), (182.72161787617344, 68.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (228.64403969804627, 173.33333333333331), (182.72161787617344, 68.33333333333333)]">
         <g transform="translate(228.64403969804627 173.33333333333331 ) ">
           <g>
             <g>
@@ -677,7 +677,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="228.64403969804627" y="173.33333333333331" width="182.72161787617344" height="68.33333333333333">
             </rect>
           </clipPath>
@@ -755,7 +755,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (439.3268684851561, 173.33333333333331), (182.72161787617344, 68.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (439.3268684851561, 173.33333333333331), (182.72161787617344, 68.33333333333333)]">
         <g transform="translate(439.3268684851561 173.33333333333331 ) ">
           <g>
             <g>
@@ -771,7 +771,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx6">
+          <clipPath id="_sample_helper_static_id_prefix_6">
             <rect x="439.3268684851561" y="173.33333333333331" width="182.72161787617344" height="68.33333333333333">
             </rect>
           </clipPath>
@@ -838,7 +838,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (17.961210910936405, 308.66666666666663), (182.72161787617344, 68.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (17.961210910936405, 308.66666666666663), (182.72161787617344, 68.33333333333333)]">
         <g transform="translate(17.961210910936405 308.66666666666663 ) ">
           <g>
             <g>
@@ -907,7 +907,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx7">
+          <clipPath id="_sample_helper_static_id_prefix_7">
             <rect x="17.961210910936405" y="308.66666666666663" width="182.72161787617344" height="68.33333333333333">
             </rect>
           </clipPath>
@@ -985,7 +985,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (228.64403969804627, 308.66666666666663), (182.72161787617344, 68.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (228.64403969804627, 308.66666666666663), (182.72161787617344, 68.33333333333333)]">
         <g transform="translate(228.64403969804627 308.66666666666663 ) ">
           <g>
             <g>
@@ -1018,7 +1018,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx8">
+          <clipPath id="_sample_helper_static_id_prefix_8">
             <rect x="228.64403969804627" y="308.66666666666663" width="182.72161787617344" height="68.33333333333333">
             </rect>
           </clipPath>
@@ -1096,7 +1096,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx9)" clip-bounds-jfx="[rect (439.3268684851561, 308.66666666666663), (182.72161787617344, 68.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_9)" clip-bounds-jfx="[rect (439.3268684851561, 308.66666666666663), (182.72161787617344, 68.33333333333333)]">
         <g transform="translate(439.3268684851561 308.66666666666663 ) ">
           <g>
             <g>
@@ -1112,7 +1112,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx9">
+          <clipPath id="_sample_helper_static_id_prefix_9">
             <rect x="439.3268684851561" y="308.66666666666663" width="182.72161787617344" height="68.33333333333333">
             </rect>
           </clipPath>
@@ -1314,6 +1314,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 2.8421709430404007E-14 L0.0 423.0 L705.0 423.0 L705.0 2.8421709430404007E-14 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx10">
+  <g id="_sample_helper_static_id_prefix_10">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalMultiplotPlotBunch.svg b/docs/images/guides/quickStartGuide/experimentalMultiplotPlotBunch.svg
index 72bc2aa83..8d7fdb705 100644
--- a/docs/images/guides/quickStartGuide/experimentalMultiplotPlotBunch.svg
+++ b/docs/images/guides/quickStartGuide/experimentalMultiplotPlotBunch.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="533.3333333333334" width="800.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 208.53333333333336 L551.5999999999999 208.53333333333336 L551.5999999999999 0.0 Z">
       </path>
       <g transform="translate(21.0 6.0 ) ">
@@ -290,7 +290,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (498.6581836335953, 162.53333333333336)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (498.6581836335953, 162.53333333333336)]">
           <g transform="translate(25.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -304,7 +304,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="25.941816366404606" y="0.0" width="498.6581836335953" height="162.53333333333336">
               </rect>
             </clipPath>
@@ -380,7 +380,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 208.53333333333336 L551.5999999999999 208.53333333333336 L551.5999999999999 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="236.39999999999998" height="208.53333333333336" x="557.5999999999999" y="6.0">
@@ -395,117 +395,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -514,7 +514,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 208.53333333333336 L236.39999999999998 208.53333333333336 L236.39999999999998 0.0 Z">
       </path>
       <g transform="translate(21.0 6.0 ) ">
@@ -540,7 +540,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (146.46788090586125, 162.53333333333336)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (146.46788090586125, 162.53333333333336)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -566,7 +566,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.961210910936405" y="0.0" width="146.46788090586125" height="162.53333333333336">
               </rect>
             </clipPath>
@@ -715,7 +715,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 208.53333333333336 L236.39999999999998 208.53333333333336 L236.39999999999998 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="788.0" height="312.8" x="6.0" y="214.53333333333336">
@@ -730,117 +730,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx7 .plot-title {
+#_sample_helper_static_id_prefix_7 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx7 .plot-subtitle {
+#_sample_helper_static_id_prefix_7 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .plot-caption {
+#_sample_helper_static_id_prefix_7 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .hyperlink-element {
+#_sample_helper_static_id_prefix_7 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx7 .legend-title {
+#_sample_helper_static_id_prefix_7 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .legend-item {
+#_sample_helper_static_id_prefix_7 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-x {
+#_sample_helper_static_id_prefix_7 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-x {
+#_sample_helper_static_id_prefix_7 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-y {
+#_sample_helper_static_id_prefix_7 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-y {
+#_sample_helper_static_id_prefix_7 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-text {
+#_sample_helper_static_id_prefix_9 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-title {
+#_sample_helper_static_id_prefix_9 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-label {
+#_sample_helper_static_id_prefix_9 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -849,7 +849,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx7">
+    <g id="_sample_helper_static_id_prefix_7">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 312.8 L788.0 312.8 L788.0 0.0 Z">
       </path>
       <g transform="translate(21.0 6.0 ) ">
@@ -899,7 +899,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (677.0872754503931, 266.8)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (677.0872754503931, 266.8)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1144,7 +1144,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx8">
+            <clipPath id="_sample_helper_static_id_prefix_8">
               <rect x="17.961210910936405" y="0.0" width="677.0872754503931" height="266.8">
               </rect>
             </clipPath>
@@ -1444,7 +1444,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 312.8 L788.0 312.8 L788.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx9">
+    <g id="_sample_helper_static_id_prefix_9">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalMultiplotPlotBunch_dark.svg b/docs/images/guides/quickStartGuide/experimentalMultiplotPlotBunch_dark.svg
index 5f1683bee..e018016cc 100644
--- a/docs/images/guides/quickStartGuide/experimentalMultiplotPlotBunch_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalMultiplotPlotBunch_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="533.3333333333334" width="800.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 208.53333333333336 L551.5999999999999 208.53333333333336 L551.5999999999999 0.0 Z">
       </path>
       <g transform="translate(21.0 6.0 ) ">
@@ -344,7 +344,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (498.6581836335953, 162.53333333333336)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (498.6581836335953, 162.53333333333336)]">
           <g transform="translate(25.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -358,7 +358,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="25.941816366404606" y="0.0" width="498.6581836335953" height="162.53333333333336">
               </rect>
             </clipPath>
@@ -380,7 +380,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 208.53333333333336 L551.5999999999999 208.53333333333336 L551.5999999999999 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="236.39999999999998" height="208.53333333333336" x="557.5999999999999" y="6.0">
@@ -395,117 +395,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -514,7 +514,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 208.53333333333336 L236.39999999999998 208.53333333333336 L236.39999999999998 0.0 Z">
       </path>
       <g transform="translate(21.0 6.0 ) ">
@@ -594,7 +594,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (146.46788090586125, 162.53333333333336)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (146.46788090586125, 162.53333333333336)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -620,7 +620,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.961210910936405" y="0.0" width="146.46788090586125" height="162.53333333333336">
               </rect>
             </clipPath>
@@ -715,7 +715,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 208.53333333333336 L236.39999999999998 208.53333333333336 L236.39999999999998 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="788.0" height="312.8" x="6.0" y="214.53333333333336">
@@ -730,117 +730,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx7 .plot-title {
+#_sample_helper_static_id_prefix_7 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx7 .plot-subtitle {
+#_sample_helper_static_id_prefix_7 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .plot-caption {
+#_sample_helper_static_id_prefix_7 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .hyperlink-element {
+#_sample_helper_static_id_prefix_7 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx7 .legend-title {
+#_sample_helper_static_id_prefix_7 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .legend-item {
+#_sample_helper_static_id_prefix_7 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-x {
+#_sample_helper_static_id_prefix_7 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-x {
+#_sample_helper_static_id_prefix_7 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-y {
+#_sample_helper_static_id_prefix_7 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-y {
+#_sample_helper_static_id_prefix_7 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-text {
+#_sample_helper_static_id_prefix_9 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-title {
+#_sample_helper_static_id_prefix_9 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-label {
+#_sample_helper_static_id_prefix_9 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -849,7 +849,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx7">
+    <g id="_sample_helper_static_id_prefix_7">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 312.8 L788.0 312.8 L788.0 0.0 Z">
       </path>
       <g transform="translate(21.0 6.0 ) ">
@@ -1055,7 +1055,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (677.0872754503931, 266.8)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (677.0872754503931, 266.8)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1300,7 +1300,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx8">
+            <clipPath id="_sample_helper_static_id_prefix_8">
               <rect x="17.961210910936405" y="0.0" width="677.0872754503931" height="266.8">
               </rect>
             </clipPath>
@@ -1444,7 +1444,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 312.8 L788.0 312.8 L788.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx9">
+    <g id="_sample_helper_static_id_prefix_9">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalMultiplotPlotGrid.svg b/docs/images/guides/quickStartGuide/experimentalMultiplotPlotGrid.svg
index c70e7fb63..a22bd3310 100644
--- a/docs/images/guides/quickStartGuide/experimentalMultiplotPlotGrid.svg
+++ b/docs/images/guides/quickStartGuide/experimentalMultiplotPlotGrid.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="600.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 6.0 ) ">
@@ -302,7 +302,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (331.08727545039307, 246.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (331.08727545039307, 246.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -547,7 +547,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.961210910936405" y="0.0" width="331.08727545039307" height="246.0">
               </rect>
             </clipPath>
@@ -793,7 +793,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="452.0" y="6.0">
@@ -808,117 +808,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -927,7 +927,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 6.0 ) ">
@@ -959,7 +959,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (389.0581836335954, 246.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (389.0581836335954, 246.0)]">
           <g transform="translate(25.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -973,7 +973,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="25.941816366404606" y="0.0" width="389.0581836335954" height="246.0">
               </rect>
             </clipPath>
@@ -1070,7 +1070,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="6.0" y="302.0">
@@ -1085,117 +1085,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx7 .plot-title {
+#_sample_helper_static_id_prefix_7 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx7 .plot-subtitle {
+#_sample_helper_static_id_prefix_7 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .plot-caption {
+#_sample_helper_static_id_prefix_7 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .hyperlink-element {
+#_sample_helper_static_id_prefix_7 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx7 .legend-title {
+#_sample_helper_static_id_prefix_7 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .legend-item {
+#_sample_helper_static_id_prefix_7 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-x {
+#_sample_helper_static_id_prefix_7 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-x {
+#_sample_helper_static_id_prefix_7 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-y {
+#_sample_helper_static_id_prefix_7 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-y {
+#_sample_helper_static_id_prefix_7 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-text {
+#_sample_helper_static_id_prefix_9 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-title {
+#_sample_helper_static_id_prefix_9 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-label {
+#_sample_helper_static_id_prefix_9 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1204,7 +1204,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx7">
+    <g id="_sample_helper_static_id_prefix_7">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 6.0 ) ">
@@ -1234,7 +1234,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (352.0678809058613, 246.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (352.0678809058613, 246.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1260,7 +1260,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx8">
+            <clipPath id="_sample_helper_static_id_prefix_8">
               <rect x="17.961210910936405" y="0.0" width="352.0678809058613" height="246.0">
               </rect>
             </clipPath>
@@ -1423,7 +1423,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx9">
+    <g id="_sample_helper_static_id_prefix_9">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalMultiplotPlotGrid_dark.svg b/docs/images/guides/quickStartGuide/experimentalMultiplotPlotGrid_dark.svg
index 6c0bd1742..bc05cbc56 100644
--- a/docs/images/guides/quickStartGuide/experimentalMultiplotPlotGrid_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalMultiplotPlotGrid_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="600.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 6.0 ) ">
@@ -404,7 +404,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (331.08727545039307, 246.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (331.08727545039307, 246.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -649,7 +649,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.961210910936405" y="0.0" width="331.08727545039307" height="246.0">
               </rect>
             </clipPath>
@@ -793,7 +793,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="452.0" y="6.0">
@@ -808,117 +808,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -927,7 +927,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 6.0 ) ">
@@ -1034,7 +1034,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (389.0581836335954, 246.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (389.0581836335954, 246.0)]">
           <g transform="translate(25.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -1048,7 +1048,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="25.941816366404606" y="0.0" width="389.0581836335954" height="246.0">
               </rect>
             </clipPath>
@@ -1070,7 +1070,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="292.0" x="6.0" y="302.0">
@@ -1085,117 +1085,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx7 .plot-title {
+#_sample_helper_static_id_prefix_7 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx7 .plot-subtitle {
+#_sample_helper_static_id_prefix_7 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .plot-caption {
+#_sample_helper_static_id_prefix_7 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .hyperlink-element {
+#_sample_helper_static_id_prefix_7 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx7 .legend-title {
+#_sample_helper_static_id_prefix_7 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .legend-item {
+#_sample_helper_static_id_prefix_7 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-x {
+#_sample_helper_static_id_prefix_7 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-x {
+#_sample_helper_static_id_prefix_7 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-title-y {
+#_sample_helper_static_id_prefix_7 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx7 .axis-text-y {
+#_sample_helper_static_id_prefix_7 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_9 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_7 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-text {
+#_sample_helper_static_id_prefix_9 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-title {
+#_sample_helper_static_id_prefix_9 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx9 .tooltip-label {
+#_sample_helper_static_id_prefix_9 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -1204,7 +1204,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx7">
+    <g id="_sample_helper_static_id_prefix_7">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 6.0 ) ">
@@ -1302,7 +1302,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (352.0678809058613, 246.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (352.0678809058613, 246.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1328,7 +1328,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx8">
+            <clipPath id="_sample_helper_static_id_prefix_8">
               <rect x="17.961210910936405" y="0.0" width="352.0678809058613" height="246.0">
               </rect>
             </clipPath>
@@ -1423,7 +1423,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 292.0 L442.0 292.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx9">
+    <g id="_sample_helper_static_id_prefix_9">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalStatisticsBinPlotWithBarsAndLines.svg b/docs/images/guides/quickStartGuide/experimentalStatisticsBinPlotWithBarsAndLines.svg
index 8124249bd..7684dff2f 100644
--- a/docs/images/guides/quickStartGuide/experimentalStatisticsBinPlotWithBarsAndLines.svg
+++ b/docs/images/guides/quickStartGuide/experimentalStatisticsBinPlotWithBarsAndLines.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -233,13 +233,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -415,6 +415,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalStatisticsBinPlotWithBarsAndLines_dark.svg b/docs/images/guides/quickStartGuide/experimentalStatisticsBinPlotWithBarsAndLines_dark.svg
index c8358a72e..f99da813d 100644
--- a/docs/images/guides/quickStartGuide/experimentalStatisticsBinPlotWithBarsAndLines_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalStatisticsBinPlotWithBarsAndLines_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -333,7 +333,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -387,13 +387,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -415,6 +415,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalStatisticsConfiguredHistogram.svg b/docs/images/guides/quickStartGuide/experimentalStatisticsConfiguredHistogram.svg
index 2f6be7355..601bbed66 100644
--- a/docs/images/guides/quickStartGuide/experimentalStatisticsConfiguredHistogram.svg
+++ b/docs/images/guides/quickStartGuide/experimentalStatisticsConfiguredHistogram.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (602.0137851410482, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (602.0137851410482, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -227,7 +227,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="602.0137851410482" height="424.0">
             </rect>
           </clipPath>
@@ -512,6 +512,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalStatisticsConfiguredHistogram_dark.svg b/docs/images/guides/quickStartGuide/experimentalStatisticsConfiguredHistogram_dark.svg
index f87d7eba6..2930fafb8 100644
--- a/docs/images/guides/quickStartGuide/experimentalStatisticsConfiguredHistogram_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalStatisticsConfiguredHistogram_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -333,7 +333,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (602.0137851410482, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (602.0137851410482, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -381,7 +381,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="602.0137851410482" height="424.0">
             </rect>
           </clipPath>
@@ -512,6 +512,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalStatisticsShortcutHistogram.svg b/docs/images/guides/quickStartGuide/experimentalStatisticsShortcutHistogram.svg
index 97d9907b0..d92cd3b2c 100644
--- a/docs/images/guides/quickStartGuide/experimentalStatisticsShortcutHistogram.svg
+++ b/docs/images/guides/quickStartGuide/experimentalStatisticsShortcutHistogram.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -227,7 +227,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="408.0">
             </rect>
           </clipPath>
@@ -408,6 +408,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalStatisticsShortcutHistogram_dark.svg b/docs/images/guides/quickStartGuide/experimentalStatisticsShortcutHistogram_dark.svg
index f44910dbd..412ef5dd3 100644
--- a/docs/images/guides/quickStartGuide/experimentalStatisticsShortcutHistogram_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalStatisticsShortcutHistogram_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -333,7 +333,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -381,7 +381,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="408.0">
             </rect>
           </clipPath>
@@ -408,6 +408,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalStatisticsStatBinOnIterableData.svg b/docs/images/guides/quickStartGuide/experimentalStatisticsStatBinOnIterableData.svg
index db39bfb9c..151091d1c 100644
--- a/docs/images/guides/quickStartGuide/experimentalStatisticsStatBinOnIterableData.svg
+++ b/docs/images/guides/quickStartGuide/experimentalStatisticsStatBinOnIterableData.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="400.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 6.0 ) ">
@@ -302,7 +302,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (391.9652987797186, 342.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (391.9652987797186, 342.0)]">
           <g transform="translate(23.034701220281416 0.0 ) ">
             <g>
               <g>
@@ -334,7 +334,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="23.034701220281416" y="0.0" width="391.9652987797186" height="342.0">
               </rect>
             </clipPath>
@@ -458,7 +458,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="388.0" x="452.0" y="6.0">
@@ -473,117 +473,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -592,7 +592,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 6.0 ) ">
@@ -632,7 +632,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 342.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 342.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -680,7 +680,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="342.0">
               </rect>
             </clipPath>
@@ -811,7 +811,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalStatisticsStatBinOnIterableData_dark.svg b/docs/images/guides/quickStartGuide/experimentalStatisticsStatBinOnIterableData_dark.svg
index 67f4197ce..70ca2ec4c 100644
--- a/docs/images/guides/quickStartGuide/experimentalStatisticsStatBinOnIterableData_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalStatisticsStatBinOnIterableData_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="400.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 6.0 ) ">
@@ -404,7 +404,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (391.9652987797186, 342.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (391.9652987797186, 342.0)]">
           <g transform="translate(23.034701220281416 0.0 ) ">
             <g>
               <g>
@@ -436,7 +436,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="23.034701220281416" y="0.0" width="391.9652987797186" height="342.0">
               </rect>
             </clipPath>
@@ -458,7 +458,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="388.0" x="452.0" y="6.0">
@@ -473,117 +473,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -592,7 +592,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 6.0 ) ">
@@ -741,7 +741,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 342.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 342.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -789,7 +789,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="342.0">
               </rect>
             </clipPath>
@@ -811,7 +811,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalStatisticsStatBinsAndHist.svg b/docs/images/guides/quickStartGuide/experimentalStatisticsStatBinsAndHist.svg
index 94f6536ac..22088abb8 100644
--- a/docs/images/guides/quickStartGuide/experimentalStatisticsStatBinsAndHist.svg
+++ b/docs/images/guides/quickStartGuide/experimentalStatisticsStatBinsAndHist.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="400.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -304,7 +304,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -352,7 +352,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="326.0">
               </rect>
             </clipPath>
@@ -488,7 +488,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="388.0" x="452.0" y="6.0">
@@ -503,117 +503,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -622,7 +622,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -662,7 +662,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -710,7 +710,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="326.0">
               </rect>
             </clipPath>
@@ -846,7 +846,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalStatisticsStatBinsAndHist_dark.svg b/docs/images/guides/quickStartGuide/experimentalStatisticsStatBinsAndHist_dark.svg
index a014e970d..4e23303f4 100644
--- a/docs/images/guides/quickStartGuide/experimentalStatisticsStatBinsAndHist_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalStatisticsStatBinsAndHist_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="400.0" width="900.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -413,7 +413,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -461,7 +461,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="326.0">
               </rect>
             </clipPath>
@@ -488,7 +488,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="442.0" height="388.0" x="452.0" y="6.0">
@@ -503,117 +503,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -622,7 +622,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -771,7 +771,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (397.0387890890636, 326.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -819,7 +819,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.961210910936405" y="0.0" width="397.0387890890636" height="326.0">
               </rect>
             </clipPath>
@@ -846,7 +846,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalTooltipsByColumns.svg b/docs/images/guides/quickStartGuide/experimentalTooltipsByColumns.svg
index 5c51232ed..1205b9112 100644
--- a/docs/images/guides/quickStartGuide/experimentalTooltipsByColumns.svg
+++ b/docs/images/guides/quickStartGuide/experimentalTooltipsByColumns.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -415,7 +415,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -607,6 +607,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalTooltipsByColumns_dark.svg b/docs/images/guides/quickStartGuide/experimentalTooltipsByColumns_dark.svg
index a863f0c26..64985463b 100644
--- a/docs/images/guides/quickStartGuide/experimentalTooltipsByColumns_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalTooltipsByColumns_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -607,6 +607,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalTooltipsCustomizedWithLine.svg b/docs/images/guides/quickStartGuide/experimentalTooltipsCustomizedWithLine.svg
index 5c51232ed..1205b9112 100644
--- a/docs/images/guides/quickStartGuide/experimentalTooltipsCustomizedWithLine.svg
+++ b/docs/images/guides/quickStartGuide/experimentalTooltipsCustomizedWithLine.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -415,7 +415,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -607,6 +607,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalTooltipsCustomizedWithLine_dark.svg b/docs/images/guides/quickStartGuide/experimentalTooltipsCustomizedWithLine_dark.svg
index a863f0c26..64985463b 100644
--- a/docs/images/guides/quickStartGuide/experimentalTooltipsCustomizedWithLine_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalTooltipsCustomizedWithLine_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -607,6 +607,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalTooltipsHideTooltips.svg b/docs/images/guides/quickStartGuide/experimentalTooltipsHideTooltips.svg
index 5c51232ed..1205b9112 100644
--- a/docs/images/guides/quickStartGuide/experimentalTooltipsHideTooltips.svg
+++ b/docs/images/guides/quickStartGuide/experimentalTooltipsHideTooltips.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -415,7 +415,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -607,6 +607,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalTooltipsHideTooltips_dark.svg b/docs/images/guides/quickStartGuide/experimentalTooltipsHideTooltips_dark.svg
index a863f0c26..64985463b 100644
--- a/docs/images/guides/quickStartGuide/experimentalTooltipsHideTooltips_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalTooltipsHideTooltips_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -607,6 +607,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalTooltipsWithTitleAnchorMinWidth.svg b/docs/images/guides/quickStartGuide/experimentalTooltipsWithTitleAnchorMinWidth.svg
index 5c51232ed..1205b9112 100644
--- a/docs/images/guides/quickStartGuide/experimentalTooltipsWithTitleAnchorMinWidth.svg
+++ b/docs/images/guides/quickStartGuide/experimentalTooltipsWithTitleAnchorMinWidth.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -415,7 +415,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -607,6 +607,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalTooltipsWithTitleAnchorMinWidth_dark.svg b/docs/images/guides/quickStartGuide/experimentalTooltipsWithTitleAnchorMinWidth_dark.svg
index a863f0c26..64985463b 100644
--- a/docs/images/guides/quickStartGuide/experimentalTooltipsWithTitleAnchorMinWidth_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalTooltipsWithTitleAnchorMinWidth_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -607,6 +607,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/groupingPlotOnDataFrame.svg b/docs/images/guides/quickStartGuide/groupingPlotOnDataFrame.svg
index dcd534b8a..eb0c52ce1 100644
--- a/docs/images/guides/quickStartGuide/groupingPlotOnDataFrame.svg
+++ b/docs/images/guides/quickStartGuide/groupingPlotOnDataFrame.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -191,7 +191,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -211,7 +211,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="424.0">
             </rect>
           </clipPath>
@@ -431,6 +431,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/groupingPlotOnDataFrame_dark.svg b/docs/images/guides/quickStartGuide/groupingPlotOnDataFrame_dark.svg
index 1c1d3367b..2b1f689a8 100644
--- a/docs/images/guides/quickStartGuide/groupingPlotOnDataFrame_dark.svg
+++ b/docs/images/guides/quickStartGuide/groupingPlotOnDataFrame_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -389,7 +389,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -409,7 +409,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="424.0">
             </rect>
           </clipPath>
@@ -431,6 +431,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/groupingPositionDodgePlot.svg b/docs/images/guides/quickStartGuide/groupingPositionDodgePlot.svg
index 3dc7cb324..7ec239c3e 100644
--- a/docs/images/guides/quickStartGuide/groupingPositionDodgePlot.svg
+++ b/docs/images/guides/quickStartGuide/groupingPositionDodgePlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -199,7 +199,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -411,6 +411,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/groupingPositionDodgePlot_dark.svg b/docs/images/guides/quickStartGuide/groupingPositionDodgePlot_dark.svg
index 9d1257edf..fbc84c20f 100644
--- a/docs/images/guides/quickStartGuide/groupingPositionDodgePlot_dark.svg
+++ b/docs/images/guides/quickStartGuide/groupingPositionDodgePlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -290,7 +290,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -316,7 +316,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -411,6 +411,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/groupingPositionIdentityPlot.svg b/docs/images/guides/quickStartGuide/groupingPositionIdentityPlot.svg
index 31c8e5d88..23cd42e8e 100644
--- a/docs/images/guides/quickStartGuide/groupingPositionIdentityPlot.svg
+++ b/docs/images/guides/quickStartGuide/groupingPositionIdentityPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -199,7 +199,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -411,6 +411,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/groupingPositionIdentityPlot_dark.svg b/docs/images/guides/quickStartGuide/groupingPositionIdentityPlot_dark.svg
index 4a3d98511..4b74e134f 100644
--- a/docs/images/guides/quickStartGuide/groupingPositionIdentityPlot_dark.svg
+++ b/docs/images/guides/quickStartGuide/groupingPositionIdentityPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -290,7 +290,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -316,7 +316,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -411,6 +411,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/groupingPositionStackPlot.svg b/docs/images/guides/quickStartGuide/groupingPositionStackPlot.svg
index ddf3ebe66..66014e132 100644
--- a/docs/images/guides/quickStartGuide/groupingPositionStackPlot.svg
+++ b/docs/images/guides/quickStartGuide/groupingPositionStackPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -165,7 +165,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -191,7 +191,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -375,6 +375,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/groupingPositionStackPlot_dark.svg b/docs/images/guides/quickStartGuide/groupingPositionStackPlot_dark.svg
index 1f15b84cc..613e2b5f9 100644
--- a/docs/images/guides/quickStartGuide/groupingPositionStackPlot_dark.svg
+++ b/docs/images/guides/quickStartGuide/groupingPositionStackPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -254,7 +254,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -280,7 +280,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -375,6 +375,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/groupingSimpleGrouping.svg b/docs/images/guides/quickStartGuide/groupingSimpleGrouping.svg
index dcd534b8a..eb0c52ce1 100644
--- a/docs/images/guides/quickStartGuide/groupingSimpleGrouping.svg
+++ b/docs/images/guides/quickStartGuide/groupingSimpleGrouping.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -191,7 +191,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -211,7 +211,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="424.0">
             </rect>
           </clipPath>
@@ -431,6 +431,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/groupingSimpleGrouping_dark.svg b/docs/images/guides/quickStartGuide/groupingSimpleGrouping_dark.svg
index 1c1d3367b..2b1f689a8 100644
--- a/docs/images/guides/quickStartGuide/groupingSimpleGrouping_dark.svg
+++ b/docs/images/guides/quickStartGuide/groupingSimpleGrouping_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -389,7 +389,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -409,7 +409,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="424.0">
             </rect>
           </clipPath>
@@ -431,6 +431,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/groupingWithColorMapping.svg b/docs/images/guides/quickStartGuide/groupingWithColorMapping.svg
index b4853079a..f99310da3 100644
--- a/docs/images/guides/quickStartGuide/groupingWithColorMapping.svg
+++ b/docs/images/guides/quickStartGuide/groupingWithColorMapping.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (590.1622018028038, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (590.1622018028038, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -199,7 +199,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="590.1622018028038" height="424.0">
             </rect>
           </clipPath>
@@ -423,6 +423,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/groupingWithColorMapping_dark.svg b/docs/images/guides/quickStartGuide/groupingWithColorMapping_dark.svg
index e85488b1f..17859fc14 100644
--- a/docs/images/guides/quickStartGuide/groupingWithColorMapping_dark.svg
+++ b/docs/images/guides/quickStartGuide/groupingWithColorMapping_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -323,7 +323,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (590.1622018028038, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (590.1622018028038, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -343,7 +343,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="590.1622018028038" height="424.0">
             </rect>
           </clipPath>
@@ -423,6 +423,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/implicitGroupingSimplePlot.svg b/docs/images/guides/quickStartGuide/implicitGroupingSimplePlot.svg
index b4853079a..f99310da3 100644
--- a/docs/images/guides/quickStartGuide/implicitGroupingSimplePlot.svg
+++ b/docs/images/guides/quickStartGuide/implicitGroupingSimplePlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (590.1622018028038, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (590.1622018028038, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -199,7 +199,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="590.1622018028038" height="424.0">
             </rect>
           </clipPath>
@@ -423,6 +423,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/implicitGroupingSimplePlot_dark.svg b/docs/images/guides/quickStartGuide/implicitGroupingSimplePlot_dark.svg
index e85488b1f..17859fc14 100644
--- a/docs/images/guides/quickStartGuide/implicitGroupingSimplePlot_dark.svg
+++ b/docs/images/guides/quickStartGuide/implicitGroupingSimplePlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -323,7 +323,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (590.1622018028038, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (590.1622018028038, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -343,7 +343,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="590.1622018028038" height="424.0">
             </rect>
           </clipPath>
@@ -423,6 +423,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/kotlinDataframeApiDrvCountPlot.svg b/docs/images/guides/quickStartGuide/kotlinDataframeApiDrvCountPlot.svg
index 0e04b2b50..588509d6a 100644
--- a/docs/images/guides/quickStartGuide/kotlinDataframeApiDrvCountPlot.svg
+++ b/docs/images/guides/quickStartGuide/kotlinDataframeApiDrvCountPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="424.0">
             </rect>
           </clipPath>
@@ -326,6 +326,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/kotlinDataframeApiDrvCountPlot_dark.svg b/docs/images/guides/quickStartGuide/kotlinDataframeApiDrvCountPlot_dark.svg
index 2503132ee..774f83735 100644
--- a/docs/images/guides/quickStartGuide/kotlinDataframeApiDrvCountPlot_dark.svg
+++ b/docs/images/guides/quickStartGuide/kotlinDataframeApiDrvCountPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -290,7 +290,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -304,7 +304,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="424.0">
             </rect>
           </clipPath>
@@ -326,6 +326,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/kotlinDataframeApiPlotMpgInfo.svg b/docs/images/guides/quickStartGuide/kotlinDataframeApiPlotMpgInfo.svg
index 407a920be..1fc2542a4 100644
--- a/docs/images/guides/quickStartGuide/kotlinDataframeApiPlotMpgInfo.svg
+++ b/docs/images/guides/quickStartGuide/kotlinDataframeApiPlotMpgInfo.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (594.0872754503931, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (594.0872754503931, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -412,7 +412,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="594.0872754503931" height="424.0">
             </rect>
           </clipPath>
@@ -658,6 +658,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/kotlinDataframeApiPlotMpgInfo_dark.svg b/docs/images/guides/quickStartGuide/kotlinDataframeApiPlotMpgInfo_dark.svg
index 72c7420d5..0b5dd1900 100644
--- a/docs/images/guides/quickStartGuide/kotlinDataframeApiPlotMpgInfo_dark.svg
+++ b/docs/images/guides/quickStartGuide/kotlinDataframeApiPlotMpgInfo_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -269,7 +269,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (594.0872754503931, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (594.0872754503931, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -514,7 +514,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="594.0872754503931" height="424.0">
             </rect>
           </clipPath>
@@ -658,6 +658,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideBoxplotConfigureGroupedBoxplot.svg b/docs/images/guides/stat/guideBoxplotConfigureGroupedBoxplot.svg
index 7f977b2a1..2879c393e 100644
--- a/docs/images/guides/stat/guideBoxplotConfigureGroupedBoxplot.svg
+++ b/docs/images/guides/stat/guideBoxplotConfigureGroupedBoxplot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 423.0 L705.0 423.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 361.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 361.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -374,13 +374,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="361.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="361.0">
             </rect>
           </clipPath>
@@ -616,6 +616,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 423.0 L705.0 423.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideBoxplotConfigureGroupedBoxplot_dark.svg b/docs/images/guides/stat/guideBoxplotConfigureGroupedBoxplot_dark.svg
index 3faf63059..f8a2cf835 100644
--- a/docs/images/guides/stat/guideBoxplotConfigureGroupedBoxplot_dark.svg
+++ b/docs/images/guides/stat/guideBoxplotConfigureGroupedBoxplot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 423.0 L705.0 423.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 361.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 361.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -492,13 +492,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="361.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="361.0">
             </rect>
           </clipPath>
@@ -616,6 +616,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 423.0 L705.0 423.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideBoxplotCustomizeGroupedBoxplot.svg b/docs/images/guides/stat/guideBoxplotCustomizeGroupedBoxplot.svg
index c9f74e441..4677f8151 100644
--- a/docs/images/guides/stat/guideBoxplotCustomizeGroupedBoxplot.svg
+++ b/docs/images/guides/stat/guideBoxplotCustomizeGroupedBoxplot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -321,7 +321,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -530,6 +530,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideBoxplotCustomizeGroupedBoxplot_dark.svg b/docs/images/guides/stat/guideBoxplotCustomizeGroupedBoxplot_dark.svg
index 9a0aa3fdb..a3b8ebb21 100644
--- a/docs/images/guides/stat/guideBoxplotCustomizeGroupedBoxplot_dark.svg
+++ b/docs/images/guides/stat/guideBoxplotCustomizeGroupedBoxplot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -280,7 +280,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -432,7 +432,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -530,6 +530,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideBoxplotGroupByBoxplot.svg b/docs/images/guides/stat/guideBoxplotGroupByBoxplot.svg
index 5dbfef347..8a42c8804 100644
--- a/docs/images/guides/stat/guideBoxplotGroupByBoxplot.svg
+++ b/docs/images/guides/stat/guideBoxplotGroupByBoxplot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -347,13 +347,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -569,6 +569,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideBoxplotGroupByBoxplot_dark.svg b/docs/images/guides/stat/guideBoxplotGroupByBoxplot_dark.svg
index 13d44d223..4ad68ac63 100644
--- a/docs/images/guides/stat/guideBoxplotGroupByBoxplot_dark.svg
+++ b/docs/images/guides/stat/guideBoxplotGroupByBoxplot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -465,13 +465,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -569,6 +569,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideBoxplotGroupedBorderLines.svg b/docs/images/guides/stat/guideBoxplotGroupedBorderLines.svg
index 61fcc3d64..e8a1d0b22 100644
--- a/docs/images/guides/stat/guideBoxplotGroupedBorderLines.svg
+++ b/docs/images/guides/stat/guideBoxplotGroupedBorderLines.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -273,7 +273,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -476,6 +476,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideBoxplotGroupedBorderLines_dark.svg b/docs/images/guides/stat/guideBoxplotGroupedBorderLines_dark.svg
index 66cbe482a..dec9e9faf 100644
--- a/docs/images/guides/stat/guideBoxplotGroupedBorderLines_dark.svg
+++ b/docs/images/guides/stat/guideBoxplotGroupedBorderLines_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -280,7 +280,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -384,7 +384,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -476,6 +476,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideBoxplotGroupedStatBoxplotEBPlot.svg b/docs/images/guides/stat/guideBoxplotGroupedStatBoxplotEBPlot.svg
index bfbf972e6..f96bb5817 100644
--- a/docs/images/guides/stat/guideBoxplotGroupedStatBoxplotEBPlot.svg
+++ b/docs/images/guides/stat/guideBoxplotGroupedStatBoxplotEBPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -273,7 +273,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -406,6 +406,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideBoxplotGroupedStatBoxplotEBPlot_dark.svg b/docs/images/guides/stat/guideBoxplotGroupedStatBoxplotEBPlot_dark.svg
index d894f0d34..05be9c94b 100644
--- a/docs/images/guides/stat/guideBoxplotGroupedStatBoxplotEBPlot_dark.svg
+++ b/docs/images/guides/stat/guideBoxplotGroupedStatBoxplotEBPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -280,7 +280,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -384,7 +384,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -406,6 +406,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideBoxplotSimpleGrBoxplotOnDf.svg b/docs/images/guides/stat/guideBoxplotSimpleGrBoxplotOnDf.svg
index 5dbfef347..8a42c8804 100644
--- a/docs/images/guides/stat/guideBoxplotSimpleGrBoxplotOnDf.svg
+++ b/docs/images/guides/stat/guideBoxplotSimpleGrBoxplotOnDf.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -347,13 +347,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -569,6 +569,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideBoxplotSimpleGrBoxplotOnDf_dark.svg b/docs/images/guides/stat/guideBoxplotSimpleGrBoxplotOnDf_dark.svg
index 13d44d223..4ad68ac63 100644
--- a/docs/images/guides/stat/guideBoxplotSimpleGrBoxplotOnDf_dark.svg
+++ b/docs/images/guides/stat/guideBoxplotSimpleGrBoxplotOnDf_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -465,13 +465,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -569,6 +569,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideBoxplotSimpleGroupedBoxplotInDf.svg b/docs/images/guides/stat/guideBoxplotSimpleGroupedBoxplotInDf.svg
index 5dbfef347..8a42c8804 100644
--- a/docs/images/guides/stat/guideBoxplotSimpleGroupedBoxplotInDf.svg
+++ b/docs/images/guides/stat/guideBoxplotSimpleGroupedBoxplotInDf.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -347,13 +347,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -569,6 +569,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideBoxplotSimpleGroupedBoxplotInDf_dark.svg b/docs/images/guides/stat/guideBoxplotSimpleGroupedBoxplotInDf_dark.svg
index 13d44d223..4ad68ac63 100644
--- a/docs/images/guides/stat/guideBoxplotSimpleGroupedBoxplotInDf_dark.svg
+++ b/docs/images/guides/stat/guideBoxplotSimpleGroupedBoxplotInDf_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -465,13 +465,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -569,6 +569,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCandlestickCandlestickPlot.svg b/docs/images/guides/stat/guideCandlestickCandlestickPlot.svg
index d4d0a6d08..7d84c8fca 100644
--- a/docs/images/guides/stat/guideCandlestickCandlestickPlot.svg
+++ b/docs/images/guides/stat/guideCandlestickCandlestickPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -225,7 +225,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="408.0">
             </rect>
           </clipPath>
@@ -349,6 +349,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCandlestickCandlestickPlotConfigured.svg b/docs/images/guides/stat/guideCandlestickCandlestickPlotConfigured.svg
index f9f43a80f..bd43066d8 100644
--- a/docs/images/guides/stat/guideCandlestickCandlestickPlotConfigured.svg
+++ b/docs/images/guides/stat/guideCandlestickCandlestickPlotConfigured.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 290.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 290.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -225,7 +225,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="290.0">
             </rect>
           </clipPath>
@@ -352,6 +352,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCandlestickCandlestickPlotConfigured_dark.svg b/docs/images/guides/stat/guideCandlestickCandlestickPlotConfigured_dark.svg
index 11912e85a..7db104dc1 100644
--- a/docs/images/guides/stat/guideCandlestickCandlestickPlotConfigured_dark.svg
+++ b/docs/images/guides/stat/guideCandlestickCandlestickPlotConfigured_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -267,7 +267,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 290.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 290.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="290.0">
             </rect>
           </clipPath>
@@ -352,6 +352,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCandlestickCandlestickPlot_dark.svg b/docs/images/guides/stat/guideCandlestickCandlestickPlot_dark.svg
index 62feee598..d681139a7 100644
--- a/docs/images/guides/stat/guideCandlestickCandlestickPlot_dark.svg
+++ b/docs/images/guides/stat/guideCandlestickCandlestickPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -267,7 +267,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="408.0">
             </rect>
           </clipPath>
@@ -349,6 +349,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCandlestickCompareBoxesVsCandlestick.svg b/docs/images/guides/stat/guideCandlestickCompareBoxesVsCandlestick.svg
index 9f0b9395c..1f6703c72 100644
--- a/docs/images/guides/stat/guideCandlestickCompareBoxesVsCandlestick.svg
+++ b/docs/images/guides/stat/guideCandlestickCompareBoxesVsCandlestick.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="235.0" width="705.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -294,7 +294,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (299.5387890890636, 161.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (299.5387890890636, 161.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -352,7 +352,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.961210910936405" y="0.0" width="299.5387890890636" height="161.0">
               </rect>
             </clipPath>
@@ -451,7 +451,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="344.5" height="223.0" x="354.5" y="6.0">
@@ -466,117 +466,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -585,7 +585,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -615,7 +615,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (299.5387890890636, 161.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (299.5387890890636, 161.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -673,7 +673,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.961210910936405" y="0.0" width="299.5387890890636" height="161.0">
               </rect>
             </clipPath>
@@ -769,7 +769,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCandlestickCompareBoxesVsCandlestick_dark.svg b/docs/images/guides/stat/guideCandlestickCompareBoxesVsCandlestick_dark.svg
index bfe8af6fa..b03cb2891 100644
--- a/docs/images/guides/stat/guideCandlestickCompareBoxesVsCandlestick_dark.svg
+++ b/docs/images/guides/stat/guideCandlestickCompareBoxesVsCandlestick_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="235.0" width="705.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -366,7 +366,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (299.5387890890636, 161.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (299.5387890890636, 161.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -424,7 +424,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.961210910936405" y="0.0" width="299.5387890890636" height="161.0">
               </rect>
             </clipPath>
@@ -451,7 +451,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="344.5" height="223.0" x="354.5" y="6.0">
@@ -466,117 +466,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -585,7 +585,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -687,7 +687,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (299.5387890890636, 161.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (299.5387890890636, 161.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -745,7 +745,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.961210910936405" y="0.0" width="299.5387890890636" height="161.0">
               </rect>
             </clipPath>
@@ -769,7 +769,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCandlestickLayerCustomizationDSL.svg b/docs/images/guides/stat/guideCandlestickLayerCustomizationDSL.svg
index 12829a122..6ea5b5a0a 100644
--- a/docs/images/guides/stat/guideCandlestickLayerCustomizationDSL.svg
+++ b/docs/images/guides/stat/guideCandlestickLayerCustomizationDSL.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -225,7 +225,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -344,6 +344,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCandlestickLayerCustomizationDSL_dark.svg b/docs/images/guides/stat/guideCandlestickLayerCustomizationDSL_dark.svg
index c5b01cd7d..40efdbcb2 100644
--- a/docs/images/guides/stat/guideCandlestickLayerCustomizationDSL_dark.svg
+++ b/docs/images/guides/stat/guideCandlestickLayerCustomizationDSL_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -267,7 +267,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -344,6 +344,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCandlestickLayerCustomizationStatAPI.svg b/docs/images/guides/stat/guideCandlestickLayerCustomizationStatAPI.svg
index 23761e69b..8a7b9dba4 100644
--- a/docs/images/guides/stat/guideCandlestickLayerCustomizationStatAPI.svg
+++ b/docs/images/guides/stat/guideCandlestickLayerCustomizationStatAPI.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (562.110757863707, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (562.110757863707, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -225,7 +225,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="562.110757863707" height="424.0">
             </rect>
           </clipPath>
@@ -394,6 +394,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCandlestickLayerCustomizationStatAPI_dark.svg b/docs/images/guides/stat/guideCandlestickLayerCustomizationStatAPI_dark.svg
index ebc85f591..1381fb915 100644
--- a/docs/images/guides/stat/guideCandlestickLayerCustomizationStatAPI_dark.svg
+++ b/docs/images/guides/stat/guideCandlestickLayerCustomizationStatAPI_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -267,7 +267,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (562.110757863707, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (562.110757863707, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="562.110757863707" height="424.0">
             </rect>
           </clipPath>
@@ -394,6 +394,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCandlestickSimpleCandlestickPlot.svg b/docs/images/guides/stat/guideCandlestickSimpleCandlestickPlot.svg
index 9313493f9..fa0e01657 100644
--- a/docs/images/guides/stat/guideCandlestickSimpleCandlestickPlot.svg
+++ b/docs/images/guides/stat/guideCandlestickSimpleCandlestickPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -225,7 +225,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -347,6 +347,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCandlestickSimpleCandlestickPlot_dark.svg b/docs/images/guides/stat/guideCandlestickSimpleCandlestickPlot_dark.svg
index 0858c6f20..15efbc2ab 100644
--- a/docs/images/guides/stat/guideCandlestickSimpleCandlestickPlot_dark.svg
+++ b/docs/images/guides/stat/guideCandlestickSimpleCandlestickPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -267,7 +267,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -347,6 +347,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCandlestickStatCandlestickBoxesPlot.svg b/docs/images/guides/stat/guideCandlestickStatCandlestickBoxesPlot.svg
index b4221638f..71561f82e 100644
--- a/docs/images/guides/stat/guideCandlestickStatCandlestickBoxesPlot.svg
+++ b/docs/images/guides/stat/guideCandlestickStatCandlestickBoxesPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -225,7 +225,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="408.0">
             </rect>
           </clipPath>
@@ -352,6 +352,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCandlestickStatCandlestickBoxesPlot_dark.svg b/docs/images/guides/stat/guideCandlestickStatCandlestickBoxesPlot_dark.svg
index 1746d33b2..f8ee0f48b 100644
--- a/docs/images/guides/stat/guideCandlestickStatCandlestickBoxesPlot_dark.svg
+++ b/docs/images/guides/stat/guideCandlestickStatCandlestickBoxesPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -267,7 +267,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="408.0">
             </rect>
           </clipPath>
@@ -352,6 +352,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCandlestickStatCandlestickErrorBarsPlot.svg b/docs/images/guides/stat/guideCandlestickStatCandlestickErrorBarsPlot.svg
index 1b9d5b343..5134896aa 100644
--- a/docs/images/guides/stat/guideCandlestickStatCandlestickErrorBarsPlot.svg
+++ b/docs/images/guides/stat/guideCandlestickStatCandlestickErrorBarsPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -223,7 +223,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -373,6 +373,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCandlestickStatCandlestickErrorBarsPlot_dark.svg b/docs/images/guides/stat/guideCandlestickStatCandlestickErrorBarsPlot_dark.svg
index 7df7380ad..c840b0830 100644
--- a/docs/images/guides/stat/guideCandlestickStatCandlestickErrorBarsPlot_dark.svg
+++ b/docs/images/guides/stat/guideCandlestickStatCandlestickErrorBarsPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -303,7 +303,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -351,7 +351,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -373,6 +373,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountBarsVsCountPlot.svg b/docs/images/guides/stat/guideCountBarsVsCountPlot.svg
index d6fc75672..049fb392c 100644
--- a/docs/images/guides/stat/guideCountBarsVsCountPlot.svg
+++ b/docs/images/guides/stat/guideCountBarsVsCountPlot.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="235.0" width="705.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -296,7 +296,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (299.5387890890636, 93.71618656967037)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (299.5387890890636, 93.71618656967037)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -318,7 +318,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.961210910936405" y="0.0" width="299.5387890890636" height="93.71618656967037">
               </rect>
             </clipPath>
@@ -428,7 +428,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="344.5" height="223.0" x="354.5" y="6.0">
@@ -443,117 +443,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -562,7 +562,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -594,7 +594,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (299.5387890890636, 93.71618656967037)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (299.5387890890636, 93.71618656967037)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -616,7 +616,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.961210910936405" y="0.0" width="299.5387890890636" height="93.71618656967037">
               </rect>
             </clipPath>
@@ -726,7 +726,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountBarsVsCountPlot_dark.svg b/docs/images/guides/stat/guideCountBarsVsCountPlot_dark.svg
index 5894ea893..20f58e406 100644
--- a/docs/images/guides/stat/guideCountBarsVsCountPlot_dark.svg
+++ b/docs/images/guides/stat/guideCountBarsVsCountPlot_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="235.0" width="705.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -379,7 +379,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (299.5387890890636, 93.71618656967037)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (299.5387890890636, 93.71618656967037)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -401,7 +401,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.961210910936405" y="0.0" width="299.5387890890636" height="93.71618656967037">
               </rect>
             </clipPath>
@@ -428,7 +428,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="344.5" height="223.0" x="354.5" y="6.0">
@@ -443,117 +443,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -562,7 +562,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -677,7 +677,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (299.5387890890636, 93.71618656967037)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (299.5387890890636, 93.71618656967037)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -699,7 +699,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.961210910936405" y="0.0" width="299.5387890890636" height="93.71618656967037">
               </rect>
             </clipPath>
@@ -726,7 +726,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountConfigureGroupedCountPlot.svg b/docs/images/guides/stat/guideCountConfigureGroupedCountPlot.svg
index b35ee7ffb..66a2834c4 100644
--- a/docs/images/guides/stat/guideCountConfigureGroupedCountPlot.svg
+++ b/docs/images/guides/stat/guideCountConfigureGroupedCountPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -203,7 +203,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -401,6 +401,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountConfigureGroupedCountPlot_dark.svg b/docs/images/guides/stat/guideCountConfigureGroupedCountPlot_dark.svg
index 5ff076afc..6c6a1265d 100644
--- a/docs/images/guides/stat/guideCountConfigureGroupedCountPlot_dark.svg
+++ b/docs/images/guides/stat/guideCountConfigureGroupedCountPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -321,7 +321,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -401,6 +401,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountConfigurePlot.svg b/docs/images/guides/stat/guideCountConfigurePlot.svg
index a62bebd80..5a19106c2 100644
--- a/docs/images/guides/stat/guideCountConfigurePlot.svg
+++ b/docs/images/guides/stat/guideCountConfigurePlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 411.0 L705.0 411.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (542.7646729309998, 349.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (542.7646729309998, 349.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -193,7 +193,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="542.7646729309998" height="349.0">
             </rect>
           </clipPath>
@@ -456,6 +456,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 411.0 L705.0 411.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountConfigurePlot_dark.svg b/docs/images/guides/stat/guideCountConfigurePlot_dark.svg
index d09c97c5c..ac61cb261 100644
--- a/docs/images/guides/stat/guideCountConfigurePlot_dark.svg
+++ b/docs/images/guides/stat/guideCountConfigurePlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 411.0 L705.0 411.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (542.7646729309998, 349.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (542.7646729309998, 349.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -311,7 +311,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="542.7646729309998" height="349.0">
             </rect>
           </clipPath>
@@ -456,6 +456,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 411.0 L705.0 411.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountConfigureSimpleGroupedCountPlot.svg b/docs/images/guides/stat/guideCountConfigureSimpleGroupedCountPlot.svg
index b51c0aa1e..f0ba9ca91 100644
--- a/docs/images/guides/stat/guideCountConfigureSimpleGroupedCountPlot.svg
+++ b/docs/images/guides/stat/guideCountConfigureSimpleGroupedCountPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -211,7 +211,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -416,6 +416,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountConfigureSimpleGroupedCountPlot_dark.svg b/docs/images/guides/stat/guideCountConfigureSimpleGroupedCountPlot_dark.svg
index 3b388abc1..e0c81edee 100644
--- a/docs/images/guides/stat/guideCountConfigureSimpleGroupedCountPlot_dark.svg
+++ b/docs/images/guides/stat/guideCountConfigureSimpleGroupedCountPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -298,7 +298,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -336,7 +336,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -416,6 +416,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountGroupByCountPlot.svg b/docs/images/guides/stat/guideCountGroupByCountPlot.svg
index b237bc912..6baf4372d 100644
--- a/docs/images/guides/stat/guideCountGroupByCountPlot.svg
+++ b/docs/images/guides/stat/guideCountGroupByCountPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -211,7 +211,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -437,6 +437,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountGroupByCountPlot_dark.svg b/docs/images/guides/stat/guideCountGroupByCountPlot_dark.svg
index 629d90262..3fde22a75 100644
--- a/docs/images/guides/stat/guideCountGroupByCountPlot_dark.svg
+++ b/docs/images/guides/stat/guideCountGroupByCountPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -357,7 +357,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -437,6 +437,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountGroupedCountPlot.svg b/docs/images/guides/stat/guideCountGroupedCountPlot.svg
index b237bc912..6baf4372d 100644
--- a/docs/images/guides/stat/guideCountGroupedCountPlot.svg
+++ b/docs/images/guides/stat/guideCountGroupedCountPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -211,7 +211,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -437,6 +437,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountGroupedCountPlot_dark.svg b/docs/images/guides/stat/guideCountGroupedCountPlot_dark.svg
index 629d90262..3fde22a75 100644
--- a/docs/images/guides/stat/guideCountGroupedCountPlot_dark.svg
+++ b/docs/images/guides/stat/guideCountGroupedCountPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -357,7 +357,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -437,6 +437,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountGroupedStatCountBarsPlot.svg b/docs/images/guides/stat/guideCountGroupedStatCountBarsPlot.svg
index 833048abd..d963862f8 100644
--- a/docs/images/guides/stat/guideCountGroupedStatCountBarsPlot.svg
+++ b/docs/images/guides/stat/guideCountGroupedStatCountBarsPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -211,7 +211,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -379,6 +379,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountGroupedStatCountBarsPlot_dark.svg b/docs/images/guides/stat/guideCountGroupedStatCountBarsPlot_dark.svg
index 09877a8ad..a7b48f95c 100644
--- a/docs/images/guides/stat/guideCountGroupedStatCountBarsPlot_dark.svg
+++ b/docs/images/guides/stat/guideCountGroupedStatCountBarsPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -357,7 +357,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -379,6 +379,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountGroupedStatCountBarsWithColorPlot.svg b/docs/images/guides/stat/guideCountGroupedStatCountBarsWithColorPlot.svg
index 832423b04..983cb8a48 100644
--- a/docs/images/guides/stat/guideCountGroupedStatCountBarsWithColorPlot.svg
+++ b/docs/images/guides/stat/guideCountGroupedStatCountBarsWithColorPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -211,7 +211,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -437,6 +437,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountGroupedStatCountBarsWithColorPlot_dark.svg b/docs/images/guides/stat/guideCountGroupedStatCountBarsWithColorPlot_dark.svg
index 0c0cfa9fd..814fcfab8 100644
--- a/docs/images/guides/stat/guideCountGroupedStatCountBarsWithColorPlot_dark.svg
+++ b/docs/images/guides/stat/guideCountGroupedStatCountBarsWithColorPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -357,7 +357,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -437,6 +437,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountPlotWithItr.svg b/docs/images/guides/stat/guideCountPlotWithItr.svg
index fc0dab167..786af41cd 100644
--- a/docs/images/guides/stat/guideCountPlotWithItr.svg
+++ b/docs/images/guides/stat/guideCountPlotWithItr.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -181,7 +181,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="654.9652987797186" height="424.0">
             </rect>
           </clipPath>
@@ -299,6 +299,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountPlotWithItr_dark.svg b/docs/images/guides/stat/guideCountPlotWithItr_dark.svg
index a856d32c3..1a45cb422 100644
--- a/docs/images/guides/stat/guideCountPlotWithItr_dark.svg
+++ b/docs/images/guides/stat/guideCountPlotWithItr_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -263,7 +263,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -277,7 +277,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="654.9652987797186" height="424.0">
             </rect>
           </clipPath>
@@ -299,6 +299,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountPlotWithWeight.svg b/docs/images/guides/stat/guideCountPlotWithWeight.svg
index 58deff71a..f3355df7e 100644
--- a/docs/images/guides/stat/guideCountPlotWithWeight.svg
+++ b/docs/images/guides/stat/guideCountPlotWithWeight.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (38.99591213121782, 0.0), (639.0040878687822, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (38.99591213121782, 0.0), (639.0040878687822, 424.0)]">
         <g transform="translate(38.99591213121782 0.0 ) ">
           <g>
             <g>
@@ -193,7 +193,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="38.99591213121782" y="0.0" width="639.0040878687822" height="424.0">
             </rect>
           </clipPath>
@@ -333,6 +333,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountPlotWithWeight_dark.svg b/docs/images/guides/stat/guideCountPlotWithWeight_dark.svg
index f0ae32b51..451c97fe7 100644
--- a/docs/images/guides/stat/guideCountPlotWithWeight_dark.svg
+++ b/docs/images/guides/stat/guideCountPlotWithWeight_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (38.99591213121782, 0.0), (639.0040878687822, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (38.99591213121782, 0.0), (639.0040878687822, 424.0)]">
         <g transform="translate(38.99591213121782 0.0 ) ">
           <g>
             <g>
@@ -311,7 +311,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="38.99591213121782" y="0.0" width="639.0040878687822" height="424.0">
             </rect>
           </clipPath>
@@ -333,6 +333,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountSimpleCountPlot.svg b/docs/images/guides/stat/guideCountSimpleCountPlot.svg
index ed15775d2..b458e4b29 100644
--- a/docs/images/guides/stat/guideCountSimpleCountPlot.svg
+++ b/docs/images/guides/stat/guideCountSimpleCountPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -193,7 +193,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -333,6 +333,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountSimpleCountPlot_dark.svg b/docs/images/guides/stat/guideCountSimpleCountPlot_dark.svg
index dc5cc204c..50060f44f 100644
--- a/docs/images/guides/stat/guideCountSimpleCountPlot_dark.svg
+++ b/docs/images/guides/stat/guideCountSimpleCountPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -311,7 +311,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -333,6 +333,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountSimpleGroupedCountPlot.svg b/docs/images/guides/stat/guideCountSimpleGroupedCountPlot.svg
index b237bc912..6baf4372d 100644
--- a/docs/images/guides/stat/guideCountSimpleGroupedCountPlot.svg
+++ b/docs/images/guides/stat/guideCountSimpleGroupedCountPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -211,7 +211,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -437,6 +437,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountSimpleGroupedCountPlot_dark.svg b/docs/images/guides/stat/guideCountSimpleGroupedCountPlot_dark.svg
index 629d90262..3fde22a75 100644
--- a/docs/images/guides/stat/guideCountSimpleGroupedCountPlot_dark.svg
+++ b/docs/images/guides/stat/guideCountSimpleGroupedCountPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -357,7 +357,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -437,6 +437,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountSimplePlot.svg b/docs/images/guides/stat/guideCountSimplePlot.svg
index acf0528b3..6770ecced 100644
--- a/docs/images/guides/stat/guideCountSimplePlot.svg
+++ b/docs/images/guides/stat/guideCountSimplePlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -193,7 +193,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="408.0">
             </rect>
           </clipPath>
@@ -338,6 +338,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountSimplePlot_dark.svg b/docs/images/guides/stat/guideCountSimplePlot_dark.svg
index 7cd51c27c..6226ddf94 100644
--- a/docs/images/guides/stat/guideCountSimplePlot_dark.svg
+++ b/docs/images/guides/stat/guideCountSimplePlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -311,7 +311,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="408.0">
             </rect>
           </clipPath>
@@ -338,6 +338,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountStatCountBarsPlot.svg b/docs/images/guides/stat/guideCountStatCountBarsPlot.svg
index a6539c2c8..cea242fcc 100644
--- a/docs/images/guides/stat/guideCountStatCountBarsPlot.svg
+++ b/docs/images/guides/stat/guideCountStatCountBarsPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -193,7 +193,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="408.0">
             </rect>
           </clipPath>
@@ -338,6 +338,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountStatCountBarsPlot_dark.svg b/docs/images/guides/stat/guideCountStatCountBarsPlot_dark.svg
index 5c1c62497..1ec922007 100644
--- a/docs/images/guides/stat/guideCountStatCountBarsPlot_dark.svg
+++ b/docs/images/guides/stat/guideCountStatCountBarsPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -311,7 +311,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="408.0">
             </rect>
           </clipPath>
@@ -338,6 +338,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountStatCountFillColor.svg b/docs/images/guides/stat/guideCountStatCountFillColor.svg
index 2d37fad65..7d3a9fe40 100644
--- a/docs/images/guides/stat/guideCountStatCountFillColor.svg
+++ b/docs/images/guides/stat/guideCountStatCountFillColor.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (607.0872754503931, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (607.0872754503931, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -193,7 +193,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="607.0872754503931" height="424.0">
             </rect>
           </clipPath>
@@ -442,6 +442,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountStatCountFillColor_dark.svg b/docs/images/guides/stat/guideCountStatCountFillColor_dark.svg
index b9cc32cda..60d798544 100644
--- a/docs/images/guides/stat/guideCountStatCountFillColor_dark.svg
+++ b/docs/images/guides/stat/guideCountStatCountFillColor_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (607.0872754503931, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (607.0872754503931, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -311,7 +311,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="607.0872754503931" height="424.0">
             </rect>
           </clipPath>
@@ -442,6 +442,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountStatCountPointsPlot.svg b/docs/images/guides/stat/guideCountStatCountPointsPlot.svg
index 0b1183d39..6740d075f 100644
--- a/docs/images/guides/stat/guideCountStatCountPointsPlot.svg
+++ b/docs/images/guides/stat/guideCountStatCountPointsPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (542.7646729309998, 356.71618656967036)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (542.7646729309998, 356.71618656967036)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -188,7 +188,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="542.7646729309998" height="356.71618656967036">
             </rect>
           </clipPath>
@@ -555,6 +555,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountStatCountPointsPlot_dark.svg b/docs/images/guides/stat/guideCountStatCountPointsPlot_dark.svg
index 0115c3d4a..f4c9678e7 100644
--- a/docs/images/guides/stat/guideCountStatCountPointsPlot_dark.svg
+++ b/docs/images/guides/stat/guideCountStatCountPointsPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -280,7 +280,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (542.7646729309998, 356.71618656967036)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (542.7646729309998, 356.71618656967036)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -299,7 +299,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="542.7646729309998" height="356.71618656967036">
             </rect>
           </clipPath>
@@ -555,6 +555,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountWithHLine.svg b/docs/images/guides/stat/guideCountWithHLine.svg
index 228e77cdb..4628f4fcd 100644
--- a/docs/images/guides/stat/guideCountWithHLine.svg
+++ b/docs/images/guides/stat/guideCountWithHLine.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (38.99591213121782, 0.0), (639.0040878687822, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (38.99591213121782, 0.0), (639.0040878687822, 424.0)]">
         <g transform="translate(38.99591213121782 0.0 ) ">
           <g>
             <g>
@@ -197,13 +197,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="38.99591213121782" y="0.0" width="639.0040878687822" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="38.99591213121782" y="0.0" width="639.0040878687822" height="424.0">
             </rect>
           </clipPath>
@@ -343,6 +343,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideCountWithHLine_dark.svg b/docs/images/guides/stat/guideCountWithHLine_dark.svg
index dc394b411..eb546d28b 100644
--- a/docs/images/guides/stat/guideCountWithHLine_dark.svg
+++ b/docs/images/guides/stat/guideCountWithHLine_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (38.99591213121782, 0.0), (639.0040878687822, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (38.99591213121782, 0.0), (639.0040878687822, 424.0)]">
         <g transform="translate(38.99591213121782 0.0 ) ">
           <g>
             <g>
@@ -315,13 +315,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="38.99591213121782" y="0.0" width="639.0040878687822" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="38.99591213121782" y="0.0" width="639.0040878687822" height="424.0">
             </rect>
           </clipPath>
@@ -343,6 +343,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideHeatmapConfigureHeatmap.svg b/docs/images/guides/stat/guideHeatmapConfigureHeatmap.svg
index 3c2da04ec..4f2469b75 100644
--- a/docs/images/guides/stat/guideHeatmapConfigureHeatmap.svg
+++ b/docs/images/guides/stat/guideHeatmapConfigureHeatmap.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 411.0 L705.0 411.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -163,7 +163,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (615.0678809058613, 349.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (615.0678809058613, 349.0)]">
         <g transform="translate(9.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="9.980605455468202" y="0.0" width="615.0678809058613" height="349.0">
             </rect>
           </clipPath>
@@ -404,6 +404,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 411.0 L705.0 411.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideHeatmapConfigureHeatmap_dark.svg b/docs/images/guides/stat/guideHeatmapConfigureHeatmap_dark.svg
index 4393533c0..f598bd9f6 100644
--- a/docs/images/guides/stat/guideHeatmapConfigureHeatmap_dark.svg
+++ b/docs/images/guides/stat/guideHeatmapConfigureHeatmap_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 411.0 L705.0 411.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -253,7 +253,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (615.0678809058613, 349.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (615.0678809058613, 349.0)]">
         <g transform="translate(9.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -277,7 +277,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="9.980605455468202" y="0.0" width="615.0678809058613" height="349.0">
             </rect>
           </clipPath>
@@ -404,6 +404,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 411.0 L705.0 411.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideHeatmapHeatmapInDf.svg b/docs/images/guides/stat/guideHeatmapHeatmapInDf.svg
index 6e3a41607..4c6925be3 100644
--- a/docs/images/guides/stat/guideHeatmapHeatmapInDf.svg
+++ b/docs/images/guides/stat/guideHeatmapHeatmapInDf.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -163,7 +163,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (615.0678809058613, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (615.0678809058613, 408.0)]">
         <g transform="translate(9.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="9.980605455468202" y="0.0" width="615.0678809058613" height="408.0">
             </rect>
           </clipPath>
@@ -404,6 +404,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideHeatmapHeatmapInDf_dark.svg b/docs/images/guides/stat/guideHeatmapHeatmapInDf_dark.svg
index 554710077..59029d064 100644
--- a/docs/images/guides/stat/guideHeatmapHeatmapInDf_dark.svg
+++ b/docs/images/guides/stat/guideHeatmapHeatmapInDf_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -253,7 +253,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (615.0678809058613, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (615.0678809058613, 408.0)]">
         <g transform="translate(9.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -277,7 +277,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="9.980605455468202" y="0.0" width="615.0678809058613" height="408.0">
             </rect>
           </clipPath>
@@ -404,6 +404,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideHeatmapHeatmapOnDf.svg b/docs/images/guides/stat/guideHeatmapHeatmapOnDf.svg
index 56d7738d3..8f2306e1e 100644
--- a/docs/images/guides/stat/guideHeatmapHeatmapOnDf.svg
+++ b/docs/images/guides/stat/guideHeatmapHeatmapOnDf.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -163,7 +163,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(9.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="9.980605455468202" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -399,6 +399,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideHeatmapHeatmapOnDf_dark.svg b/docs/images/guides/stat/guideHeatmapHeatmapOnDf_dark.svg
index 72f7d0ccf..396eb365d 100644
--- a/docs/images/guides/stat/guideHeatmapHeatmapOnDf_dark.svg
+++ b/docs/images/guides/stat/guideHeatmapHeatmapOnDf_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -253,7 +253,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (615.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (615.0678809058613, 424.0)]">
         <g transform="translate(9.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -277,7 +277,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="9.980605455468202" y="0.0" width="615.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -399,6 +399,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideHeatmapSimpleHeatmapInDf.svg b/docs/images/guides/stat/guideHeatmapSimpleHeatmapInDf.svg
index fa6816482..7b4376499 100644
--- a/docs/images/guides/stat/guideHeatmapSimpleHeatmapInDf.svg
+++ b/docs/images/guides/stat/guideHeatmapSimpleHeatmapInDf.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -163,7 +163,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (541.6183666430544, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (541.6183666430544, 424.0)]">
         <g transform="translate(9.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="9.980605455468202" y="0.0" width="541.6183666430544" height="424.0">
             </rect>
           </clipPath>
@@ -399,6 +399,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideHeatmapSimpleHeatmapInDf_dark.svg b/docs/images/guides/stat/guideHeatmapSimpleHeatmapInDf_dark.svg
index 4d157e775..ef9791a31 100644
--- a/docs/images/guides/stat/guideHeatmapSimpleHeatmapInDf_dark.svg
+++ b/docs/images/guides/stat/guideHeatmapSimpleHeatmapInDf_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -253,7 +253,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (541.6183666430544, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (541.6183666430544, 424.0)]">
         <g transform="translate(9.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -277,7 +277,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="9.980605455468202" y="0.0" width="541.6183666430544" height="424.0">
             </rect>
           </clipPath>
@@ -399,6 +399,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideHeatmapStatCount2DPlot.svg b/docs/images/guides/stat/guideHeatmapStatCount2DPlot.svg
index afa6dc2b0..8feab7d6b 100644
--- a/docs/images/guides/stat/guideHeatmapStatCount2DPlot.svg
+++ b/docs/images/guides/stat/guideHeatmapStatCount2DPlot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -163,7 +163,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (570.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (570.0678809058613, 424.0)]">
         <g transform="translate(9.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="9.980605455468202" y="0.0" width="570.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -392,6 +392,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideHeatmapStatCount2DPlot_dark.svg b/docs/images/guides/stat/guideHeatmapStatCount2DPlot_dark.svg
index 1aad167b8..2c1c60025 100644
--- a/docs/images/guides/stat/guideHeatmapStatCount2DPlot_dark.svg
+++ b/docs/images/guides/stat/guideHeatmapStatCount2DPlot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -253,7 +253,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (570.0678809058613, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (570.0678809058613, 424.0)]">
         <g transform="translate(9.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -277,7 +277,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="9.980605455468202" y="0.0" width="570.0678809058613" height="424.0">
             </rect>
           </clipPath>
@@ -392,6 +392,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideHeatmapStatCount2DTile.svg b/docs/images/guides/stat/guideHeatmapStatCount2DTile.svg
index 8cf21cc96..d1bd07b8d 100644
--- a/docs/images/guides/stat/guideHeatmapStatCount2DTile.svg
+++ b/docs/images/guides/stat/guideHeatmapStatCount2DTile.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -163,7 +163,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (615.0678809058613, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (615.0678809058613, 408.0)]">
         <g transform="translate(9.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="9.980605455468202" y="0.0" width="615.0678809058613" height="408.0">
             </rect>
           </clipPath>
@@ -404,6 +404,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideHeatmapStatCount2DTile_dark.svg b/docs/images/guides/stat/guideHeatmapStatCount2DTile_dark.svg
index 6eff0e99d..e033e602a 100644
--- a/docs/images/guides/stat/guideHeatmapStatCount2DTile_dark.svg
+++ b/docs/images/guides/stat/guideHeatmapStatCount2DTile_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -253,7 +253,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (615.0678809058613, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (615.0678809058613, 408.0)]">
         <g transform="translate(9.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -277,7 +277,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="9.980605455468202" y="0.0" width="615.0678809058613" height="408.0">
             </rect>
           </clipPath>
@@ -404,6 +404,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideHeatmapTileVsHeatMap.svg b/docs/images/guides/stat/guideHeatmapTileVsHeatMap.svg
index c36836b25..514b37b6c 100644
--- a/docs/images/guides/stat/guideHeatmapTileVsHeatMap.svg
+++ b/docs/images/guides/stat/guideHeatmapTileVsHeatMap.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="235.0" width="705.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -298,7 +298,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (254.56788090586127, 93.71618656967037)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (254.56788090586127, 93.71618656967037)]">
           <g transform="translate(9.980605455468202 0.0 ) ">
             <g>
               <g>
@@ -322,7 +322,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="9.980605455468202" y="0.0" width="254.56788090586127" height="93.71618656967037">
               </rect>
             </clipPath>
@@ -539,7 +539,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="344.5" height="223.0" x="354.5" y="6.0">
@@ -554,117 +554,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -673,7 +673,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -707,7 +707,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (254.56788090586127, 93.71618656967037)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (254.56788090586127, 93.71618656967037)]">
           <g transform="translate(9.980605455468202 0.0 ) ">
             <g>
               <g>
@@ -731,7 +731,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="9.980605455468202" y="0.0" width="254.56788090586127" height="93.71618656967037">
               </rect>
             </clipPath>
@@ -948,7 +948,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideHeatmapTileVsHeatMap_dark.svg b/docs/images/guides/stat/guideHeatmapTileVsHeatMap_dark.svg
index 79a54937a..fac44cc56 100644
--- a/docs/images/guides/stat/guideHeatmapTileVsHeatMap_dark.svg
+++ b/docs/images/guides/stat/guideHeatmapTileVsHeatMap_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="235.0" width="705.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -388,7 +388,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (254.56788090586127, 93.71618656967037)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (254.56788090586127, 93.71618656967037)]">
           <g transform="translate(9.980605455468202 0.0 ) ">
             <g>
               <g>
@@ -412,7 +412,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="9.980605455468202" y="0.0" width="254.56788090586127" height="93.71618656967037">
               </rect>
             </clipPath>
@@ -539,7 +539,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="344.5" height="223.0" x="354.5" y="6.0">
@@ -554,117 +554,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -673,7 +673,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -797,7 +797,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (254.56788090586127, 93.71618656967037)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (254.56788090586127, 93.71618656967037)]">
           <g transform="translate(9.980605455468202 0.0 ) ">
             <g>
               <g>
@@ -821,7 +821,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="9.980605455468202" y="0.0" width="254.56788090586127" height="93.71618656967037">
               </rect>
             </clipPath>
@@ -948,7 +948,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideHeatmapWithFillColor.svg b/docs/images/guides/stat/guideHeatmapWithFillColor.svg
index 5dd990f36..cde20f257 100644
--- a/docs/images/guides/stat/guideHeatmapWithFillColor.svg
+++ b/docs/images/guides/stat/guideHeatmapWithFillColor.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -163,7 +163,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (82.28381343032963, 0.0), (542.764672931, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (82.28381343032963, 0.0), (542.764672931, 424.0)]">
         <g transform="translate(82.28381343032963 0.0 ) ">
           <g>
             <g>
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="82.28381343032963" y="0.0" width="542.764672931" height="424.0">
             </rect>
           </clipPath>
@@ -379,6 +379,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideHeatmapWithFillColor_dark.svg b/docs/images/guides/stat/guideHeatmapWithFillColor_dark.svg
index 97a31a870..77fcb891d 100644
--- a/docs/images/guides/stat/guideHeatmapWithFillColor_dark.svg
+++ b/docs/images/guides/stat/guideHeatmapWithFillColor_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -245,7 +245,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (82.28381343032963, 0.0), (542.764672931, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (82.28381343032963, 0.0), (542.764672931, 424.0)]">
         <g transform="translate(82.28381343032963 0.0 ) ">
           <g>
             <g>
@@ -269,7 +269,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="82.28381343032963" y="0.0" width="542.764672931" height="424.0">
             </rect>
           </clipPath>
@@ -379,6 +379,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideHeatmapWithIterable.svg b/docs/images/guides/stat/guideHeatmapWithIterable.svg
index 96c4914a3..30c1c18d0 100644
--- a/docs/images/guides/stat/guideHeatmapWithIterable.svg
+++ b/docs/images/guides/stat/guideHeatmapWithIterable.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (596.9402948317031, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (596.9402948317031, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -189,7 +189,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="596.9402948317031" height="424.0">
             </rect>
           </clipPath>
@@ -428,6 +428,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideHeatmapWithIterable_dark.svg b/docs/images/guides/stat/guideHeatmapWithIterable_dark.svg
index e54b0ab7b..cf50d671c 100644
--- a/docs/images/guides/stat/guideHeatmapWithIterable_dark.svg
+++ b/docs/images/guides/stat/guideHeatmapWithIterable_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -290,7 +290,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (596.9402948317031, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (596.9402948317031, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -306,7 +306,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="596.9402948317031" height="424.0">
             </rect>
           </clipPath>
@@ -428,6 +428,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideHeatmapWithWeight.svg b/docs/images/guides/stat/guideHeatmapWithWeight.svg
index fa6816482..7b4376499 100644
--- a/docs/images/guides/stat/guideHeatmapWithWeight.svg
+++ b/docs/images/guides/stat/guideHeatmapWithWeight.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -163,7 +163,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (541.6183666430544, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (541.6183666430544, 424.0)]">
         <g transform="translate(9.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="9.980605455468202" y="0.0" width="541.6183666430544" height="424.0">
             </rect>
           </clipPath>
@@ -399,6 +399,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/stat/guideHeatmapWithWeight_dark.svg b/docs/images/guides/stat/guideHeatmapWithWeight_dark.svg
index 4d157e775..ef9791a31 100644
--- a/docs/images/guides/stat/guideHeatmapWithWeight_dark.svg
+++ b/docs/images/guides/stat/guideHeatmapWithWeight_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -253,7 +253,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (541.6183666430544, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (541.6183666430544, 424.0)]">
         <g transform="translate(9.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -277,7 +277,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="9.980605455468202" y="0.0" width="541.6183666430544" height="424.0">
             </rect>
           </clipPath>
@@ -399,6 +399,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/quickstart_sample.svg b/docs/images/quickstart_sample.svg
index 5cff5d418..e5983ef3c 100644
--- a/docs/images/quickstart_sample.svg
+++ b/docs/images/quickstart_sample.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 453.0 L705.0 453.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (582.5291288269711, 365.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (582.5291288269711, 365.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -205,13 +205,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="582.5291288269711" height="365.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="582.5291288269711" height="365.0">
             </rect>
           </clipPath>
@@ -475,6 +475,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 453.0 L705.0 453.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/quickstart_sample_dark.svg b/docs/images/quickstart_sample_dark.svg
index d3e3767c5..c53ba0134 100644
--- a/docs/images/quickstart_sample_dark.svg
+++ b/docs/images/quickstart_sample_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 453.0 L705.0 453.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -313,7 +313,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (582.5291288269711, 365.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (582.5291288269711, 365.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -343,13 +343,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="582.5291288269711" height="365.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="582.5291288269711" height="365.0">
             </rect>
           </clipPath>
@@ -475,6 +475,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 453.0 L705.0 453.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/area/area_fixed.svg b/docs/images/samples/area/area_fixed.svg
index ea4d405ea..a992f29a1 100644
--- a/docs/images/samples/area/area_fixed.svg
+++ b/docs/images/samples/area/area_fixed.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 41.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (668.0193945445318, 330.73695078369224)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (668.0193945445318, 330.73695078369224)]">
         <g transform="translate(9.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -201,13 +201,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="9.980605455468202" y="0.0" width="668.0193945445318" height="330.73695078369224">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="9.980605455468202" y="0.0" width="668.0193945445318" height="330.73695078369224">
             </rect>
           </clipPath>
@@ -395,6 +395,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/area/area_fixed_dark.svg b/docs/images/samples/area/area_fixed_dark.svg
index f7e4a9756..0ff701238 100644
--- a/docs/images/samples/area/area_fixed_dark.svg
+++ b/docs/images/samples/area/area_fixed_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 41.0 ) ">
@@ -335,7 +335,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (668.0193945445318, 330.73695078369224)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (668.0193945445318, 330.73695078369224)]">
         <g transform="translate(9.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -357,13 +357,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="9.980605455468202" y="0.0" width="668.0193945445318" height="330.73695078369224">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="9.980605455468202" y="0.0" width="668.0193945445318" height="330.73695078369224">
             </rect>
           </clipPath>
@@ -395,6 +395,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/area/area_settings.svg b/docs/images/samples/area/area_settings.svg
index a0de9d7a6..b47c79312 100644
--- a/docs/images/samples/area/area_settings.svg
+++ b/docs/images/samples/area/area_settings.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -181,7 +181,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 408.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -197,7 +197,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="408.0">
             </rect>
           </clipPath>
@@ -379,6 +379,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/area/area_settings_dark.svg b/docs/images/samples/area/area_settings_dark.svg
index 6a451687a..42b7f56f7 100644
--- a/docs/images/samples/area/area_settings_dark.svg
+++ b/docs/images/samples/area/area_settings_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -336,7 +336,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 408.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -352,7 +352,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="408.0">
             </rect>
           </clipPath>
@@ -379,6 +379,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/area/area_with_mark_line.svg b/docs/images/samples/area/area_with_mark_line.svg
index 6e50ee93b..54ba8066a 100644
--- a/docs/images/samples/area/area_with_mark_line.svg
+++ b/docs/images/samples/area/area_with_mark_line.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 317.0 L705.0 317.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (577.5942098989958, 212.7369507836922)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (577.5942098989958, 212.7369507836922)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -211,19 +211,19 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="577.5942098989958" height="212.7369507836922">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="577.5942098989958" height="212.7369507836922">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="17.961210910936405" y="0.0" width="577.5942098989958" height="212.7369507836922">
             </rect>
           </clipPath>
@@ -444,6 +444,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 317.0 L705.0 317.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/area/area_with_mark_line_dark.svg b/docs/images/samples/area/area_with_mark_line_dark.svg
index 2ed4ce45e..529ed057b 100644
--- a/docs/images/samples/area/area_with_mark_line_dark.svg
+++ b/docs/images/samples/area/area_with_mark_line_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 317.0 L705.0 317.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -335,7 +335,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (577.5942098989958, 212.7369507836922)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (577.5942098989958, 212.7369507836922)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -367,19 +367,19 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="577.5942098989958" height="212.7369507836922">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="577.5942098989958" height="212.7369507836922">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="17.961210910936405" y="0.0" width="577.5942098989958" height="212.7369507836922">
             </rect>
           </clipPath>
@@ -444,6 +444,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 317.0 L705.0 317.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/area/area_with_reversed_axis.svg b/docs/images/samples/area/area_with_reversed_axis.svg
index adc15d8ee..4109776da 100644
--- a/docs/images/samples/area/area_with_reversed_axis.svg
+++ b/docs/images/samples/area/area_with_reversed_axis.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 41.0 ) ">
@@ -177,7 +177,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 389.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 389.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -193,7 +193,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="654.9652987797186" height="389.0">
             </rect>
           </clipPath>
@@ -364,6 +364,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/area/area_with_reversed_axis_dark.svg b/docs/images/samples/area/area_with_reversed_axis_dark.svg
index d3a410565..71addd40f 100644
--- a/docs/images/samples/area/area_with_reversed_axis_dark.svg
+++ b/docs/images/samples/area/area_with_reversed_axis_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 41.0 ) ">
@@ -316,7 +316,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 389.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 389.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -332,7 +332,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="654.9652987797186" height="389.0">
             </rect>
           </clipPath>
@@ -364,6 +364,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/area/density_plot.svg b/docs/images/samples/area/density_plot.svg
index e3e4beb64..d16b91aa3 100644
--- a/docs/images/samples/area/density_plot.svg
+++ b/docs/images/samples/area/density_plot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
         <g transform="translate(31.015306675749617 0.0 ) ">
           <g>
             <g>
@@ -191,7 +191,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.015306675749617" y="0.0" width="646.9846933242504" height="424.0">
             </rect>
           </clipPath>
@@ -345,6 +345,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/area/density_plot_dark.svg b/docs/images/samples/area/density_plot_dark.svg
index 9cddff9f7..f2fe1d43c 100644
--- a/docs/images/samples/area/density_plot_dark.svg
+++ b/docs/images/samples/area/density_plot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -307,7 +307,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
         <g transform="translate(31.015306675749617 0.0 ) ">
           <g>
             <g>
@@ -323,7 +323,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.015306675749617" y="0.0" width="646.9846933242504" height="424.0">
             </rect>
           </clipPath>
@@ -345,6 +345,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/area/functional_area_plot.svg b/docs/images/samples/area/functional_area_plot.svg
index a6007e380..8a0ae7887 100644
--- a/docs/images/samples/area/functional_area_plot.svg
+++ b/docs/images/samples/area/functional_area_plot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -185,7 +185,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
         <g transform="translate(31.015306675749617 0.0 ) ">
           <g>
             <g>
@@ -201,7 +201,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.015306675749617" y="0.0" width="646.9846933242504" height="424.0">
             </rect>
           </clipPath>
@@ -394,6 +394,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/area/functional_area_plot_dark.svg b/docs/images/samples/area/functional_area_plot_dark.svg
index 66bcb1bdd..5e03f1549 100644
--- a/docs/images/samples/area/functional_area_plot_dark.svg
+++ b/docs/images/samples/area/functional_area_plot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -356,7 +356,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
         <g transform="translate(31.015306675749617 0.0 ) ">
           <g>
             <g>
@@ -372,7 +372,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.015306675749617" y="0.0" width="646.9846933242504" height="424.0">
             </rect>
           </clipPath>
@@ -394,6 +394,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/area/preview_area_with_mark_line.svg b/docs/images/samples/area/preview_area_with_mark_line.svg
index c303baef5..07f1aa45b 100644
--- a/docs/images/samples/area/preview_area_with_mark_line.svg
+++ b/docs/images/samples/area/preview_area_with_mark_line.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (472.59420989899587, 295.73695078369224)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (472.59420989899587, 295.73695078369224)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -211,19 +211,19 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="472.59420989899587" height="295.73695078369224">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="472.59420989899587" height="295.73695078369224">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="17.961210910936405" y="0.0" width="472.59420989899587" height="295.73695078369224">
             </rect>
           </clipPath>
@@ -444,6 +444,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/area/preview_area_with_mark_line_dark.svg b/docs/images/samples/area/preview_area_with_mark_line_dark.svg
index 98bec4f4b..98d12a6bf 100644
--- a/docs/images/samples/area/preview_area_with_mark_line_dark.svg
+++ b/docs/images/samples/area/preview_area_with_mark_line_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -335,7 +335,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (472.59420989899587, 295.73695078369224)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (472.59420989899587, 295.73695078369224)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -367,19 +367,19 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="472.59420989899587" height="295.73695078369224">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="472.59420989899587" height="295.73695078369224">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="17.961210910936405" y="0.0" width="472.59420989899587" height="295.73695078369224">
             </rect>
           </clipPath>
@@ -444,6 +444,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/area/several_areas.svg b/docs/images/samples/area/several_areas.svg
index 7418bfaa1..0aaab9f2c 100644
--- a/docs/images/samples/area/several_areas.svg
+++ b/docs/images/samples/area/several_areas.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (38.99591213121782, 0.0), (538.4319226045562, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (38.99591213121782, 0.0), (538.4319226045562, 408.0)]">
         <g transform="translate(38.99591213121782 0.0 ) ">
           <g>
             <g>
@@ -219,7 +219,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="38.99591213121782" y="0.0" width="538.4319226045562" height="408.0">
             </rect>
           </clipPath>
@@ -450,6 +450,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/area/several_areas_dark.svg b/docs/images/samples/area/several_areas_dark.svg
index de241ea5b..f9ec336c6 100644
--- a/docs/images/samples/area/several_areas_dark.svg
+++ b/docs/images/samples/area/several_areas_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -287,7 +287,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (38.99591213121782, 0.0), (538.4319226045562, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (38.99591213121782, 0.0), (538.4319226045562, 408.0)]">
         <g transform="translate(38.99591213121782 0.0 ) ">
           <g>
             <g>
@@ -335,7 +335,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="38.99591213121782" y="0.0" width="538.4319226045562" height="408.0">
             </rect>
           </clipPath>
@@ -450,6 +450,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/area/simple_area.svg b/docs/images/samples/area/simple_area.svg
index 5f8c02b61..4117a9479 100644
--- a/docs/images/samples/area/simple_area.svg
+++ b/docs/images/samples/area/simple_area.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -191,7 +191,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -345,6 +345,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/area/simple_area_dark.svg b/docs/images/samples/area/simple_area_dark.svg
index f5cbfbc89..774d7d576 100644
--- a/docs/images/samples/area/simple_area_dark.svg
+++ b/docs/images/samples/area/simple_area_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -307,7 +307,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -323,7 +323,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -345,6 +345,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/area/smoothed_area.svg b/docs/images/samples/area/smoothed_area.svg
index 240bc64af..ba05bde29 100644
--- a/docs/images/samples/area/smoothed_area.svg
+++ b/docs/images/samples/area/smoothed_area.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (668.0193945445318, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (668.0193945445318, 424.0)]">
         <g transform="translate(9.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="9.980605455468202" y="0.0" width="668.0193945445318" height="424.0">
             </rect>
           </clipPath>
@@ -327,6 +327,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/area/smoothed_area_dark.svg b/docs/images/samples/area/smoothed_area_dark.svg
index 26a533ee6..e6bed79ee 100644
--- a/docs/images/samples/area/smoothed_area_dark.svg
+++ b/docs/images/samples/area/smoothed_area_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (668.0193945445318, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (668.0193945445318, 424.0)]">
         <g transform="translate(9.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -305,7 +305,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="9.980605455468202" y="0.0" width="668.0193945445318" height="424.0">
             </rect>
           </clipPath>
@@ -327,6 +327,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/area/smoothed_area_with_points.svg b/docs/images/samples/area/smoothed_area_with_points.svg
index 3ff69eb82..466dbbcb9 100644
--- a/docs/images/samples/area/smoothed_area_with_points.svg
+++ b/docs/images/samples/area/smoothed_area_with_points.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (668.0193945445318, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (668.0193945445318, 424.0)]">
         <g transform="translate(9.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -206,13 +206,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="9.980605455468202" y="0.0" width="668.0193945445318" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="9.980605455468202" y="0.0" width="668.0193945445318" height="424.0">
             </rect>
           </clipPath>
@@ -359,6 +359,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/area/smoothed_area_with_points_dark.svg b/docs/images/samples/area/smoothed_area_with_points_dark.svg
index 91b4f9c84..43c418045 100644
--- a/docs/images/samples/area/smoothed_area_with_points_dark.svg
+++ b/docs/images/samples/area/smoothed_area_with_points_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -298,7 +298,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (668.0193945445318, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (668.0193945445318, 424.0)]">
         <g transform="translate(9.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -331,13 +331,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="9.980605455468202" y="0.0" width="668.0193945445318" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="9.980605455468202" y="0.0" width="668.0193945445318" height="424.0">
             </rect>
           </clipPath>
@@ -359,6 +359,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/bars/bar_gradient.svg b/docs/images/samples/bars/bar_gradient.svg
index ece262165..85b924a54 100644
--- a/docs/images/samples/bars/bar_gradient.svg
+++ b/docs/images/samples/bars/bar_gradient.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (38.99591213121782, 0.0), (528.4671905533629, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (38.99591213121782, 0.0), (528.4671905533629, 408.0)]">
         <g transform="translate(38.99591213121782 0.0 ) ">
           <g>
             <g>
@@ -193,7 +193,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="38.99591213121782" y="0.0" width="528.4671905533629" height="408.0">
             </rect>
           </clipPath>
@@ -450,6 +450,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/bars/bar_gradient_dark.svg b/docs/images/samples/bars/bar_gradient_dark.svg
index 6a8146778..5e662468b 100644
--- a/docs/images/samples/bars/bar_gradient_dark.svg
+++ b/docs/images/samples/bars/bar_gradient_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (38.99591213121782, 0.0), (528.4671905533629, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (38.99591213121782, 0.0), (528.4671905533629, 408.0)]">
         <g transform="translate(38.99591213121782 0.0 ) ">
           <g>
             <g>
@@ -311,7 +311,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="38.99591213121782" y="0.0" width="528.4671905533629" height="408.0">
             </rect>
           </clipPath>
@@ -450,6 +450,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/bars/bar_settings.svg b/docs/images/samples/bars/bar_settings.svg
index c1c3b9ae4..6374488a8 100644
--- a/docs/images/samples/bars/bar_settings.svg
+++ b/docs/images/samples/bars/bar_settings.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 392.4)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 392.4)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -201,7 +201,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="392.4">
             </rect>
           </clipPath>
@@ -374,6 +374,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/bars/bar_settings_dark.svg b/docs/images/samples/bars/bar_settings_dark.svg
index 5379207c5..9f4b35034 100644
--- a/docs/images/samples/bars/bar_settings_dark.svg
+++ b/docs/images/samples/bars/bar_settings_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 392.4)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 392.4)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -347,7 +347,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="392.4">
             </rect>
           </clipPath>
@@ -374,6 +374,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/bars/bar_with_reversed_axis.svg b/docs/images/samples/bars/bar_with_reversed_axis.svg
index dd5582fca..046a8e2fd 100644
--- a/docs/images/samples/bars/bar_with_reversed_axis.svg
+++ b/docs/images/samples/bars/bar_with_reversed_axis.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -316,6 +316,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/bars/bar_with_reversed_axis_dark.svg b/docs/images/samples/bars/bar_with_reversed_axis_dark.svg
index 219611184..901573730 100644
--- a/docs/images/samples/bars/bar_with_reversed_axis_dark.svg
+++ b/docs/images/samples/bars/bar_with_reversed_axis_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -276,7 +276,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -294,7 +294,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -316,6 +316,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/bars/fixed_bar.svg b/docs/images/samples/bars/fixed_bar.svg
index d507eb8b3..9451cb77a 100644
--- a/docs/images/samples/bars/fixed_bar.svg
+++ b/docs/images/samples/bars/fixed_bar.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -217,13 +217,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="424.0">
             </rect>
           </clipPath>
@@ -391,6 +391,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/bars/fixed_bar_dark.svg b/docs/images/samples/bars/fixed_bar_dark.svg
index e78243e2e..d1da48d9d 100644
--- a/docs/images/samples/bars/fixed_bar_dark.svg
+++ b/docs/images/samples/bars/fixed_bar_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -363,13 +363,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="424.0">
             </rect>
           </clipPath>
@@ -391,6 +391,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/bars/functional_bars_plot.svg b/docs/images/samples/bars/functional_bars_plot.svg
index 7d35fe38a..45074d3e1 100644
--- a/docs/images/samples/bars/functional_bars_plot.svg
+++ b/docs/images/samples/bars/functional_bars_plot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
         <g transform="translate(31.015306675749617 0.0 ) ">
           <g>
             <g>
@@ -517,7 +517,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.015306675749617" y="0.0" width="646.9846933242504" height="424.0">
             </rect>
           </clipPath>
@@ -721,6 +721,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/bars/functional_bars_plot_dark.svg b/docs/images/samples/bars/functional_bars_plot_dark.svg
index 091a123d6..dc707d64c 100644
--- a/docs/images/samples/bars/functional_bars_plot_dark.svg
+++ b/docs/images/samples/bars/functional_bars_plot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -369,7 +369,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
         <g transform="translate(31.015306675749617 0.0 ) ">
           <g>
             <g>
@@ -699,7 +699,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.015306675749617" y="0.0" width="646.9846933242504" height="424.0">
             </rect>
           </clipPath>
@@ -721,6 +721,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/bars/grouped_bars.svg b/docs/images/samples/bars/grouped_bars.svg
index 56601d71b..12f90db0c 100644
--- a/docs/images/samples/bars/grouped_bars.svg
+++ b/docs/images/samples/bars/grouped_bars.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (575.9055936114218, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (575.9055936114218, 408.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -225,7 +225,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="575.9055936114218" height="408.0">
             </rect>
           </clipPath>
@@ -442,6 +442,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/bars/grouped_bars_dark.svg b/docs/images/samples/bars/grouped_bars_dark.svg
index 4d4937f63..6e82bb7cf 100644
--- a/docs/images/samples/bars/grouped_bars_dark.svg
+++ b/docs/images/samples/bars/grouped_bars_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -307,7 +307,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (575.9055936114218, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (575.9055936114218, 408.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -357,7 +357,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="575.9055936114218" height="408.0">
             </rect>
           </clipPath>
@@ -442,6 +442,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/bars/histogram_2.svg b/docs/images/samples/bars/histogram_2.svg
index 9cd74349b..f38b1d50d 100644
--- a/docs/images/samples/bars/histogram_2.svg
+++ b/docs/images/samples/bars/histogram_2.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -221,7 +221,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="424.0">
             </rect>
           </clipPath>
@@ -368,6 +368,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/bars/histogram_2_dark.svg b/docs/images/samples/bars/histogram_2_dark.svg
index 12812ca93..7b48b6340 100644
--- a/docs/images/samples/bars/histogram_2_dark.svg
+++ b/docs/images/samples/bars/histogram_2_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -298,7 +298,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -346,7 +346,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="424.0">
             </rect>
           </clipPath>
@@ -368,6 +368,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/bars/horizontal_bars.svg b/docs/images/samples/bars/horizontal_bars.svg
index aa6d3c128..db96f57d4 100644
--- a/docs/images/samples/bars/horizontal_bars.svg
+++ b/docs/images/samples/bars/horizontal_bars.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (128.38654742168382, 0.0), (386.23660242889827, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (128.38654742168382, 0.0), (386.23660242889827, 408.0)]">
         <g transform="translate(128.38654742168382 0.0 ) ">
           <g>
             <g>
@@ -189,7 +189,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="128.38654742168382" y="0.0" width="386.23660242889827" height="408.0">
             </rect>
           </clipPath>
@@ -434,6 +434,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/bars/horizontal_bars_dark.svg b/docs/images/samples/bars/horizontal_bars_dark.svg
index 448c51c74..958827ff8 100644
--- a/docs/images/samples/bars/horizontal_bars_dark.svg
+++ b/docs/images/samples/bars/horizontal_bars_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -267,7 +267,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (128.38654742168382, 0.0), (386.23660242889827, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (128.38654742168382, 0.0), (386.23660242889827, 408.0)]">
         <g transform="translate(128.38654742168382 0.0 ) ">
           <g>
             <g>
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="128.38654742168382" y="0.0" width="386.23660242889827" height="408.0">
             </rect>
           </clipPath>
@@ -434,6 +434,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/bars/simple_bar_plot.svg b/docs/images/samples/bars/simple_bar_plot.svg
index 6d83d7be4..78c916ef1 100644
--- a/docs/images/samples/bars/simple_bar_plot.svg
+++ b/docs/images/samples/bars/simple_bar_plot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -185,7 +185,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="408.0">
             </rect>
           </clipPath>
@@ -312,6 +312,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/bars/simple_bar_plot_dark.svg b/docs/images/samples/bars/simple_bar_plot_dark.svg
index 177e76d22..70f637d7f 100644
--- a/docs/images/samples/bars/simple_bar_plot_dark.svg
+++ b/docs/images/samples/bars/simple_bar_plot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -267,7 +267,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -285,7 +285,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="408.0">
             </rect>
           </clipPath>
@@ -312,6 +312,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/bars/stacked_bars.svg b/docs/images/samples/bars/stacked_bars.svg
index 849f032ef..1dbba5a4b 100644
--- a/docs/images/samples/bars/stacked_bars.svg
+++ b/docs/images/samples/bars/stacked_bars.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (575.9055936114218, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (575.9055936114218, 408.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -229,7 +229,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="575.9055936114218" height="408.0">
             </rect>
           </clipPath>
@@ -460,6 +460,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/bars/stacked_bars_dark.svg b/docs/images/samples/bars/stacked_bars_dark.svg
index 1d5b39e0c..f28d9ea7e 100644
--- a/docs/images/samples/bars/stacked_bars_dark.svg
+++ b/docs/images/samples/bars/stacked_bars_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (575.9055936114218, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (575.9055936114218, 408.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -375,7 +375,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="575.9055936114218" height="408.0">
             </rect>
           </clipPath>
@@ -460,6 +460,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/boxplot/boxplot_categories.svg b/docs/images/samples/boxplot/boxplot_categories.svg
index 4427cd764..8c0edec3a 100644
--- a/docs/images/samples/boxplot/boxplot_categories.svg
+++ b/docs/images/samples/boxplot/boxplot_categories.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -185,7 +185,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (549.0566620988939, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (549.0566620988939, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -559,13 +559,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="549.0566620988939" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="25.941816366404606" y="0.0" width="549.0566620988939" height="424.0">
             </rect>
           </clipPath>
@@ -836,6 +836,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/boxplot/boxplot_categories_dark.svg b/docs/images/samples/boxplot/boxplot_categories_dark.svg
index 689547747..28bf7ad29 100644
--- a/docs/images/samples/boxplot/boxplot_categories_dark.svg
+++ b/docs/images/samples/boxplot/boxplot_categories_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -358,7 +358,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (549.0566620988939, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (549.0566620988939, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -732,13 +732,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="549.0566620988939" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="25.941816366404606" y="0.0" width="549.0566620988939" height="424.0">
             </rect>
           </clipPath>
@@ -836,6 +836,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/boxplot/boxplot_expr.svg b/docs/images/samples/boxplot/boxplot_expr.svg
index d2ccc045a..57fe5577f 100644
--- a/docs/images/samples/boxplot/boxplot_expr.svg
+++ b/docs/images/samples/boxplot/boxplot_expr.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (38.99591213121782, 0.0), (639.0040878687822, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (38.99591213121782, 0.0), (639.0040878687822, 424.0)]">
         <g transform="translate(38.99591213121782 0.0 ) ">
           <g>
             <g>
@@ -253,13 +253,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="38.99591213121782" y="0.0" width="639.0040878687822" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="38.99591213121782" y="0.0" width="639.0040878687822" height="424.0">
             </rect>
           </clipPath>
@@ -402,6 +402,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/boxplot/boxplot_expr_dark.svg b/docs/images/samples/boxplot/boxplot_expr_dark.svg
index 636b01fc6..19e56cede 100644
--- a/docs/images/samples/boxplot/boxplot_expr_dark.svg
+++ b/docs/images/samples/boxplot/boxplot_expr_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -294,7 +294,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (38.99591213121782, 0.0), (639.0040878687822, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (38.99591213121782, 0.0), (639.0040878687822, 424.0)]">
         <g transform="translate(38.99591213121782 0.0 ) ">
           <g>
             <g>
@@ -374,13 +374,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="38.99591213121782" y="0.0" width="639.0040878687822" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="38.99591213121782" y="0.0" width="639.0040878687822" height="424.0">
             </rect>
           </clipPath>
@@ -402,6 +402,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/boxplot/boxplot_life_exp.svg b/docs/images/samples/boxplot/boxplot_life_exp.svg
index 31fbb649a..ae59bd665 100644
--- a/docs/images/samples/boxplot/boxplot_life_exp.svg
+++ b/docs/images/samples/boxplot/boxplot_life_exp.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (113.21880258897198, 0.0), (564.781197411028, 428.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (113.21880258897198, 0.0), (564.781197411028, 428.0)]">
         <g transform="translate(113.21880258897198 0.0 ) ">
           <g>
             <g>
@@ -271,13 +271,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="113.21880258897198" y="0.0" width="564.781197411028" height="428.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="113.21880258897198" y="0.0" width="564.781197411028" height="428.0">
             </rect>
           </clipPath>
@@ -410,6 +410,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/boxplot/boxplot_life_exp_dark.svg b/docs/images/samples/boxplot/boxplot_life_exp_dark.svg
index fd69c784c..b5be5d634 100644
--- a/docs/images/samples/boxplot/boxplot_life_exp_dark.svg
+++ b/docs/images/samples/boxplot/boxplot_life_exp_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -280,7 +280,7 @@ font-size: 13.0px;
           </line>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (113.21880258897198, 0.0), (564.781197411028, 428.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (113.21880258897198, 0.0), (564.781197411028, 428.0)]">
         <g transform="translate(113.21880258897198 0.0 ) ">
           <g>
             <g>
@@ -382,13 +382,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="113.21880258897198" y="0.0" width="564.781197411028" height="428.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="113.21880258897198" y="0.0" width="564.781197411028" height="428.0">
             </rect>
           </clipPath>
@@ -410,6 +410,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/candlestick/candlestick_settings_dsl.svg b/docs/images/samples/candlestick/candlestick_settings_dsl.svg
index 63cbe75a7..29e0dc426 100644
--- a/docs/images/samples/candlestick/candlestick_settings_dsl.svg
+++ b/docs/images/samples/candlestick/candlestick_settings_dsl.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -185,7 +185,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -293,7 +293,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -488,6 +488,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/candlestick/candlestick_settings_dsl_dark.svg b/docs/images/samples/candlestick/candlestick_settings_dsl_dark.svg
index 2886ac6b8..737f97c4d 100644
--- a/docs/images/samples/candlestick/candlestick_settings_dsl_dark.svg
+++ b/docs/images/samples/candlestick/candlestick_settings_dsl_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -358,7 +358,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -466,7 +466,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -488,6 +488,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/candlestick/candlestick_settings_stat_api.svg b/docs/images/samples/candlestick/candlestick_settings_stat_api.svg
index 87d8abacf..71cbd2bbf 100644
--- a/docs/images/samples/candlestick/candlestick_settings_stat_api.svg
+++ b/docs/images/samples/candlestick/candlestick_settings_stat_api.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 376.0 L705.0 376.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (562.110757863707, 330.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (562.110757863707, 330.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -239,7 +239,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="562.110757863707" height="330.0">
             </rect>
           </clipPath>
@@ -424,6 +424,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 376.0 L705.0 376.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/candlestick/candlestick_settings_stat_api_dark.svg b/docs/images/samples/candlestick/candlestick_settings_stat_api_dark.svg
index fa3e27b90..a4f2f998b 100644
--- a/docs/images/samples/candlestick/candlestick_settings_stat_api_dark.svg
+++ b/docs/images/samples/candlestick/candlestick_settings_stat_api_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 376.0 L705.0 376.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -287,7 +287,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (562.110757863707, 330.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (562.110757863707, 330.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -355,7 +355,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="562.110757863707" height="330.0">
             </rect>
           </clipPath>
@@ -424,6 +424,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 376.0 L705.0 376.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/candlestick/candlestick_simple.svg b/docs/images/samples/candlestick/candlestick_simple.svg
index 9584ec47e..9440e71a5 100644
--- a/docs/images/samples/candlestick/candlestick_simple.svg
+++ b/docs/images/samples/candlestick/candlestick_simple.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -225,7 +225,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -344,6 +344,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/candlestick/candlestick_simple_dark.svg b/docs/images/samples/candlestick/candlestick_simple_dark.svg
index fcf607b6a..2ea632f03 100644
--- a/docs/images/samples/candlestick/candlestick_simple_dark.svg
+++ b/docs/images/samples/candlestick/candlestick_simple_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -267,7 +267,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -344,6 +344,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/candlestick/preview_candlestick_settings_stat_api.svg b/docs/images/samples/candlestick/preview_candlestick_settings_stat_api.svg
index 329b03852..db35a369b 100644
--- a/docs/images/samples/candlestick/preview_candlestick_settings_stat_api.svg
+++ b/docs/images/samples/candlestick/preview_candlestick_settings_stat_api.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (457.1107578637071, 354.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (457.1107578637071, 354.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -239,7 +239,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="457.1107578637071" height="354.0">
             </rect>
           </clipPath>
@@ -424,6 +424,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/candlestick/preview_candlestick_settings_stat_api_dark.svg b/docs/images/samples/candlestick/preview_candlestick_settings_stat_api_dark.svg
index 0a8a04127..5e6dc0fd8 100644
--- a/docs/images/samples/candlestick/preview_candlestick_settings_stat_api_dark.svg
+++ b/docs/images/samples/candlestick/preview_candlestick_settings_stat_api_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -287,7 +287,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (457.1107578637071, 354.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (457.1107578637071, 354.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -355,7 +355,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="457.1107578637071" height="354.0">
             </rect>
           </clipPath>
@@ -424,6 +424,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/countPlot/countPlot_grouped.svg b/docs/images/samples/countPlot/countPlot_grouped.svg
index dfe83a997..83fc4a504 100644
--- a/docs/images/samples/countPlot/countPlot_grouped.svg
+++ b/docs/images/samples/countPlot/countPlot_grouped.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -161,7 +161,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (571.3022207311019, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (571.3022207311019, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -181,7 +181,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="571.3022207311019" height="424.0">
             </rect>
           </clipPath>
@@ -334,6 +334,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/countPlot/countPlot_grouped_dark.svg b/docs/images/samples/countPlot/countPlot_grouped_dark.svg
index 214a32fd5..3d09fa59e 100644
--- a/docs/images/samples/countPlot/countPlot_grouped_dark.svg
+++ b/docs/images/samples/countPlot/countPlot_grouped_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -234,7 +234,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (571.3022207311019, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (571.3022207311019, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -254,7 +254,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="571.3022207311019" height="424.0">
             </rect>
           </clipPath>
@@ -334,6 +334,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/countPlot/countPlot_horizontal.svg b/docs/images/samples/countPlot/countPlot_horizontal.svg
index dc3953fcc..856b09a1e 100644
--- a/docs/images/samples/countPlot/countPlot_horizontal.svg
+++ b/docs/images/samples/countPlot/countPlot_horizontal.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (52.050007896031026, 0.0), (625.949992103969, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (52.050007896031026, 0.0), (625.949992103969, 408.0)]">
         <g transform="translate(52.050007896031026 0.0 ) ">
           <g>
             <g>
@@ -183,7 +183,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="52.050007896031026" y="0.0" width="625.949992103969" height="408.0">
             </rect>
           </clipPath>
@@ -316,6 +316,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/countPlot/countPlot_horizontal_dark.svg b/docs/images/samples/countPlot/countPlot_horizontal_dark.svg
index e9905f782..9fc01da87 100644
--- a/docs/images/samples/countPlot/countPlot_horizontal_dark.svg
+++ b/docs/images/samples/countPlot/countPlot_horizontal_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -273,7 +273,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (52.050007896031026, 0.0), (625.949992103969, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (52.050007896031026, 0.0), (625.949992103969, 408.0)]">
         <g transform="translate(52.050007896031026 0.0 ) ">
           <g>
             <g>
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="52.050007896031026" y="0.0" width="625.949992103969" height="408.0">
             </rect>
           </clipPath>
@@ -316,6 +316,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/countPlot/countPlot_settings.svg b/docs/images/samples/countPlot/countPlot_settings.svg
index 195a06cb6..059f84057 100644
--- a/docs/images/samples/countPlot/countPlot_settings.svg
+++ b/docs/images/samples/countPlot/countPlot_settings.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -181,7 +181,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -299,6 +299,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/countPlot/countPlot_settings_dark.svg b/docs/images/samples/countPlot/countPlot_settings_dark.svg
index 3743ed414..ee66a0c54 100644
--- a/docs/images/samples/countPlot/countPlot_settings_dark.svg
+++ b/docs/images/samples/countPlot/countPlot_settings_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -263,7 +263,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -277,7 +277,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -299,6 +299,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/countPlot/countPlot_simple.svg b/docs/images/samples/countPlot/countPlot_simple.svg
index 9a80455bb..546af7cae 100644
--- a/docs/images/samples/countPlot/countPlot_simple.svg
+++ b/docs/images/samples/countPlot/countPlot_simple.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -183,7 +183,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -308,6 +308,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/countPlot/countPlot_simple_dark.svg b/docs/images/samples/countPlot/countPlot_simple_dark.svg
index 871c71044..2b2d08e92 100644
--- a/docs/images/samples/countPlot/countPlot_simple_dark.svg
+++ b/docs/images/samples/countPlot/countPlot_simple_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -272,7 +272,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -286,7 +286,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -308,6 +308,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/densityPlot/densityPlot_grouped.svg b/docs/images/samples/densityPlot/densityPlot_grouped.svg
index 75b605355..e5861c224 100644
--- a/docs/images/samples/densityPlot/densityPlot_grouped.svg
+++ b/docs/images/samples/densityPlot/densityPlot_grouped.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -181,7 +181,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (537.6911826216549, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (537.6911826216549, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -205,7 +205,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="537.6911826216549" height="424.0">
             </rect>
           </clipPath>
@@ -427,6 +427,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/densityPlot/densityPlot_grouped_dark.svg b/docs/images/samples/densityPlot/densityPlot_grouped_dark.svg
index c9e667575..878f676b1 100644
--- a/docs/images/samples/densityPlot/densityPlot_grouped_dark.svg
+++ b/docs/images/samples/densityPlot/densityPlot_grouped_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -338,7 +338,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (537.6911826216549, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (537.6911826216549, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -362,7 +362,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="537.6911826216549" height="424.0">
             </rect>
           </clipPath>
@@ -427,6 +427,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/densityPlot/densityPlot_settings.svg b/docs/images/samples/densityPlot/densityPlot_settings.svg
index ef9a45608..850c803b9 100644
--- a/docs/images/samples/densityPlot/densityPlot_settings.svg
+++ b/docs/images/samples/densityPlot/densityPlot_settings.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 408.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -203,7 +203,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="654.9652987797186" height="408.0">
             </rect>
           </clipPath>
@@ -412,6 +412,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/densityPlot/densityPlot_settings_dark.svg b/docs/images/samples/densityPlot/densityPlot_settings_dark.svg
index bd5eb3a34..903084b6b 100644
--- a/docs/images/samples/densityPlot/densityPlot_settings_dark.svg
+++ b/docs/images/samples/densityPlot/densityPlot_settings_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -369,7 +369,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 408.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -385,7 +385,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="654.9652987797186" height="408.0">
             </rect>
           </clipPath>
@@ -412,6 +412,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/densityPlot/densityPlot_simple.svg b/docs/images/samples/densityPlot/densityPlot_simple.svg
index 41f3f4dd4..5cb5bd142 100644
--- a/docs/images/samples/densityPlot/densityPlot_simple.svg
+++ b/docs/images/samples/densityPlot/densityPlot_simple.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
         <g transform="translate(31.015306675749617 0.0 ) ">
           <g>
             <g>
@@ -191,7 +191,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.015306675749617" y="0.0" width="646.9846933242504" height="424.0">
             </rect>
           </clipPath>
@@ -345,6 +345,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/densityPlot/densityPlot_simple_dark.svg b/docs/images/samples/densityPlot/densityPlot_simple_dark.svg
index 9b4ca2164..d94424eb6 100644
--- a/docs/images/samples/densityPlot/densityPlot_simple_dark.svg
+++ b/docs/images/samples/densityPlot/densityPlot_simple_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -307,7 +307,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
         <g transform="translate(31.015306675749617 0.0 ) ">
           <g>
             <g>
@@ -323,7 +323,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.015306675749617" y="0.0" width="646.9846933242504" height="424.0">
             </rect>
           </clipPath>
@@ -345,6 +345,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/densityPlot/densityPlot_with_histogram.svg b/docs/images/samples/densityPlot/densityPlot_with_histogram.svg
index 006d2ed80..e464f5b9d 100644
--- a/docs/images/samples/densityPlot/densityPlot_with_histogram.svg
+++ b/docs/images/samples/densityPlot/densityPlot_with_histogram.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -177,7 +177,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (38.99591213121782, 0.0), (639.0040878687822, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (38.99591213121782, 0.0), (639.0040878687822, 408.0)]">
         <g transform="translate(38.99591213121782 0.0 ) ">
           <g>
             <g>
@@ -235,13 +235,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="38.99591213121782" y="0.0" width="639.0040878687822" height="408.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="38.99591213121782" y="0.0" width="639.0040878687822" height="408.0">
             </rect>
           </clipPath>
@@ -411,6 +411,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/densityPlot/densityPlot_with_histogram_dark.svg b/docs/images/samples/densityPlot/densityPlot_with_histogram_dark.svg
index 81898d783..5938b9045 100644
--- a/docs/images/samples/densityPlot/densityPlot_with_histogram_dark.svg
+++ b/docs/images/samples/densityPlot/densityPlot_with_histogram_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -320,7 +320,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (38.99591213121782, 0.0), (639.0040878687822, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (38.99591213121782, 0.0), (639.0040878687822, 408.0)]">
         <g transform="translate(38.99591213121782 0.0 ) ">
           <g>
             <g>
@@ -378,13 +378,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="38.99591213121782" y="0.0" width="639.0040878687822" height="408.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="38.99591213121782" y="0.0" width="639.0040878687822" height="408.0">
             </rect>
           </clipPath>
@@ -411,6 +411,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/errorBars/border_line_error_bars.svg b/docs/images/samples/errorBars/border_line_error_bars.svg
index 03242f9d9..12b182cad 100644
--- a/docs/images/samples/errorBars/border_line_error_bars.svg
+++ b/docs/images/samples/errorBars/border_line_error_bars.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (607.0872754503931, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (607.0872754503931, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -219,7 +219,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="607.0872754503931" height="424.0">
             </rect>
           </clipPath>
@@ -455,6 +455,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/errorBars/border_line_error_bars_dark.svg b/docs/images/samples/errorBars/border_line_error_bars_dark.svg
index 4e62a64c2..1ac98f191 100644
--- a/docs/images/samples/errorBars/border_line_error_bars_dark.svg
+++ b/docs/images/samples/errorBars/border_line_error_bars_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -285,7 +285,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (607.0872754503931, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (607.0872754503931, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -333,7 +333,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="607.0872754503931" height="424.0">
             </rect>
           </clipPath>
@@ -455,6 +455,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/errorBars/error_bars_settings.svg b/docs/images/samples/errorBars/error_bars_settings.svg
index e117e7d1b..3a83422db 100644
--- a/docs/images/samples/errorBars/error_bars_settings.svg
+++ b/docs/images/samples/errorBars/error_bars_settings.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -219,7 +219,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -355,6 +355,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/errorBars/error_bars_settings_dark.svg b/docs/images/samples/errorBars/error_bars_settings_dark.svg
index 0a08e3dbe..5c0d675ec 100644
--- a/docs/images/samples/errorBars/error_bars_settings_dark.svg
+++ b/docs/images/samples/errorBars/error_bars_settings_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -285,7 +285,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -333,7 +333,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -355,6 +355,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/errorBars/error_bars_with_boxplot.svg b/docs/images/samples/errorBars/error_bars_with_boxplot.svg
index 48b71c587..ab9558eed 100644
--- a/docs/images/samples/errorBars/error_bars_with_boxplot.svg
+++ b/docs/images/samples/errorBars/error_bars_with_boxplot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (609.9943905965164, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (609.9943905965164, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -201,7 +201,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="609.9943905965164" height="424.0">
             </rect>
           </clipPath>
@@ -396,6 +396,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/errorBars/error_bars_with_boxplot_dark.svg b/docs/images/samples/errorBars/error_bars_with_boxplot_dark.svg
index c3e7f4e33..6ada7ce19 100644
--- a/docs/images/samples/errorBars/error_bars_with_boxplot_dark.svg
+++ b/docs/images/samples/errorBars/error_bars_with_boxplot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -272,7 +272,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (609.9943905965164, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (609.9943905965164, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -304,7 +304,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="609.9943905965164" height="424.0">
             </rect>
           </clipPath>
@@ -396,6 +396,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/errorBars/error_bars_with_line.svg b/docs/images/samples/errorBars/error_bars_with_line.svg
index f610d2a3c..802e4a172 100644
--- a/docs/images/samples/errorBars/error_bars_with_line.svg
+++ b/docs/images/samples/errorBars/error_bars_with_line.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -225,13 +225,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -367,6 +367,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/errorBars/error_bars_with_line_dark.svg b/docs/images/samples/errorBars/error_bars_with_line_dark.svg
index b34d42239..e849d5fc4 100644
--- a/docs/images/samples/errorBars/error_bars_with_line_dark.svg
+++ b/docs/images/samples/errorBars/error_bars_with_line_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -285,7 +285,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -339,13 +339,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -367,6 +367,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/errorBars/fixed_error_bars.svg b/docs/images/samples/errorBars/fixed_error_bars.svg
index 55fb1e162..5f0bcf65d 100644
--- a/docs/images/samples/errorBars/fixed_error_bars.svg
+++ b/docs/images/samples/errorBars/fixed_error_bars.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -215,7 +215,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -337,6 +337,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/errorBars/fixed_error_bars_dark.svg b/docs/images/samples/errorBars/fixed_error_bars_dark.svg
index e8e44d4a9..915ff4bfb 100644
--- a/docs/images/samples/errorBars/fixed_error_bars_dark.svg
+++ b/docs/images/samples/errorBars/fixed_error_bars_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -267,7 +267,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -315,7 +315,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -337,6 +337,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/errorBars/grouped_error_bars.svg b/docs/images/samples/errorBars/grouped_error_bars.svg
index ae7ff1434..b4e2b71ac 100644
--- a/docs/images/samples/errorBars/grouped_error_bars.svg
+++ b/docs/images/samples/errorBars/grouped_error_bars.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (578.006898758758, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (578.006898758758, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -263,7 +263,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="578.006898758758" height="424.0">
             </rect>
           </clipPath>
@@ -464,6 +464,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/errorBars/grouped_error_bars_dark.svg b/docs/images/samples/errorBars/grouped_error_bars_dark.svg
index befbcc00b..054515948 100644
--- a/docs/images/samples/errorBars/grouped_error_bars_dark.svg
+++ b/docs/images/samples/errorBars/grouped_error_bars_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -303,7 +303,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (578.006898758758, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (578.006898758758, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -391,7 +391,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="578.006898758758" height="424.0">
             </rect>
           </clipPath>
@@ -464,6 +464,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/errorBars/simple_error_bar_plot.svg b/docs/images/samples/errorBars/simple_error_bar_plot.svg
index bcd1c36c4..528dbe22c 100644
--- a/docs/images/samples/errorBars/simple_error_bar_plot.svg
+++ b/docs/images/samples/errorBars/simple_error_bar_plot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -219,7 +219,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -355,6 +355,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/errorBars/simple_error_bar_plot_dark.svg b/docs/images/samples/errorBars/simple_error_bar_plot_dark.svg
index f443a5c7d..dce0929c0 100644
--- a/docs/images/samples/errorBars/simple_error_bar_plot_dark.svg
+++ b/docs/images/samples/errorBars/simple_error_bar_plot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -285,7 +285,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -333,7 +333,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -355,6 +355,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/geo/germany_map_categories.svg b/docs/images/samples/geo/germany_map_categories.svg
index 3bb1b27b9..cefb33f9b 100644
--- a/docs/images/samples/geo/germany_map_categories.svg
+++ b/docs/images/samples/geo/germany_map_categories.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 12.012730247377277 L0.0 457.98726975262275 L705.0 457.98726975262275 L705.0 12.012730247377277 Z">
     </path>
     <g transform="translate(6.0 34.01273024737728 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (307.15251939815175, 417.97453950524545)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (307.15251939815175, 417.97453950524545)]">
         <g transform="">
           <g>
             <g>
@@ -219,7 +219,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="307.15251939815175" height="417.97453950524545">
             </rect>
           </clipPath>
@@ -489,6 +489,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 12.012730247377277 L0.0 457.98726975262275 L705.0 457.98726975262275 L705.0 12.012730247377277 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/geo/germany_map_categories_dark.svg b/docs/images/samples/geo/germany_map_categories_dark.svg
index 768566ddb..7c643e013 100644
--- a/docs/images/samples/geo/germany_map_categories_dark.svg
+++ b/docs/images/samples/geo/germany_map_categories_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 12.012730247377277 L0.0 457.98726975262275 L705.0 457.98726975262275 L705.0 12.012730247377277 Z">
     </path>
     <g transform="translate(6.0 34.01273024737728 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (307.15251939815175, 417.97453950524545)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (307.15251939815175, 417.97453950524545)]">
         <g transform="">
           <g>
             <g>
@@ -219,7 +219,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="307.15251939815175" height="417.97453950524545">
             </rect>
           </clipPath>
@@ -489,6 +489,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 12.012730247377277 L0.0 457.98726975262275 L705.0 457.98726975262275 L705.0 12.012730247377277 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/geo/germany_map_settings_shapefile.svg b/docs/images/samples/geo/germany_map_settings_shapefile.svg
index 3a29f4b3a..754d6cf3e 100644
--- a/docs/images/samples/geo/germany_map_settings_shapefile.svg
+++ b/docs/images/samples/geo/germany_map_settings_shapefile.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M184.09607255661643 0.0 L184.09607255661643 470.0 L520.9039274433835 470.0 L520.9039274433835 0.0 Z">
     </path>
     <g transform="translate(190.09607255661643 22.0 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (324.80785488676713, 442.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (324.80785488676713, 442.0)]">
         <g transform="">
           <g>
             <g>
@@ -219,7 +219,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="324.80785488676713" height="442.0">
             </rect>
           </clipPath>
@@ -236,6 +236,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M184.09607255661643 0.0 L184.09607255661643 470.0 L520.9039274433835 470.0 L520.9039274433835 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/geo/germany_map_settings_shapefile_dark.svg b/docs/images/samples/geo/germany_map_settings_shapefile_dark.svg
index 1ecd42ac5..b1b5c0033 100644
--- a/docs/images/samples/geo/germany_map_settings_shapefile_dark.svg
+++ b/docs/images/samples/geo/germany_map_settings_shapefile_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M184.09607255661643 0.0 L184.09607255661643 470.0 L520.9039274433835 470.0 L520.9039274433835 0.0 Z">
     </path>
     <g transform="translate(190.09607255661643 22.0 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (324.80785488676713, 442.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (324.80785488676713, 442.0)]">
         <g transform="">
           <g>
             <g>
@@ -219,7 +219,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="324.80785488676713" height="442.0">
             </rect>
           </clipPath>
@@ -236,6 +236,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M184.09607255661643 0.0 L184.09607255661643 470.0 L520.9039274433835 470.0 L520.9039274433835 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/geo/preview_germany_map_categories.svg b/docs/images/samples/geo/preview_germany_map_categories.svg
index c9c8b1206..83c746487 100644
--- a/docs/images/samples/geo/preview_germany_map_categories.svg
+++ b/docs/images/samples/geo/preview_germany_map_categories.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 48.45496802235229 L0.0 351.5450319776477 L600.0 351.5450319776477 L600.0 48.45496802235229 Z">
     </path>
     <g transform="translate(6.0 70.45496802235229 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (202.15251939815175, 275.0900639552954)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (202.15251939815175, 275.0900639552954)]">
         <g transform="">
           <g>
             <g>
@@ -219,7 +219,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="202.15251939815175" height="275.0900639552954">
             </rect>
           </clipPath>
@@ -489,6 +489,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 48.45496802235229 L0.0 351.5450319776477 L600.0 351.5450319776477 L600.0 48.45496802235229 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/geo/preview_germany_map_categories_dark.svg b/docs/images/samples/geo/preview_germany_map_categories_dark.svg
index 526180339..2db527928 100644
--- a/docs/images/samples/geo/preview_germany_map_categories_dark.svg
+++ b/docs/images/samples/geo/preview_germany_map_categories_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 48.45496802235229 L0.0 351.5450319776477 L600.0 351.5450319776477 L600.0 48.45496802235229 Z">
     </path>
     <g transform="translate(6.0 70.45496802235229 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (202.15251939815175, 275.0900639552954)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (202.15251939815175, 275.0900639552954)]">
         <g transform="">
           <g>
             <g>
@@ -219,7 +219,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="202.15251939815175" height="275.0900639552954">
             </rect>
           </clipPath>
@@ -489,6 +489,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 48.45496802235229 L0.0 351.5450319776477 L600.0 351.5450319776477 L600.0 48.45496802235229 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/geo/preview_usa_election_results_joined.svg b/docs/images/samples/geo/preview_usa_election_results_joined.svg
index ecb514186..492cd6731 100644
--- a/docs/images/samples/geo/preview_usa_election_results_joined.svg
+++ b/docs/images/samples/geo/preview_usa_election_results_joined.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M19.97427487319726 0.0 L19.97427487319726 400.0 L580.0257251268027 400.0 L580.0257251268027 0.0 Z">
     </path>
     <g transform="translate(25.97427487319726 55.0 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (548.0514502536055, 339.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (548.0514502536055, 339.0)]">
         <g transform="">
           <g>
             <g>
@@ -355,7 +355,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="548.0514502536055" height="339.0">
             </rect>
           </clipPath>
@@ -415,6 +415,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M19.97427487319726 0.0 L19.97427487319726 400.0 L580.0257251268027 400.0 L580.0257251268027 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/geo/preview_usa_election_results_joined_dark.svg b/docs/images/samples/geo/preview_usa_election_results_joined_dark.svg
index 81fdb55a5..65b415135 100644
--- a/docs/images/samples/geo/preview_usa_election_results_joined_dark.svg
+++ b/docs/images/samples/geo/preview_usa_election_results_joined_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M19.97427487319726 0.0 L19.97427487319726 400.0 L580.0257251268027 400.0 L580.0257251268027 0.0 Z">
     </path>
     <g transform="translate(25.97427487319726 55.0 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (548.0514502536055, 339.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (548.0514502536055, 339.0)]">
         <g transform="">
           <g>
             <g>
@@ -355,7 +355,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="548.0514502536055" height="339.0">
             </rect>
           </clipPath>
@@ -415,6 +415,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M19.97427487319726 0.0 L19.97427487319726 400.0 L580.0257251268027 400.0 L580.0257251268027 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/geo/usa_adjusted.svg b/docs/images/samples/geo/usa_adjusted.svg
index e2aaec230..395ef5d12 100644
--- a/docs/images/samples/geo/usa_adjusted.svg
+++ b/docs/images/samples/geo/usa_adjusted.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 7.864832218167692 L0.0 462.1351677818323 L705.0 462.1351677818323 L705.0 7.864832218167692 Z">
     </path>
     <g transform="translate(21.0 13.864832218167692 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.2703355636646)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.2703355636646)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -387,7 +387,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="408.2703355636646">
             </rect>
           </clipPath>
@@ -527,6 +527,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 7.864832218167692 L0.0 462.1351677818323 L705.0 462.1351677818323 L705.0 7.864832218167692 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/geo/usa_adjusted_dark.svg b/docs/images/samples/geo/usa_adjusted_dark.svg
index 3f0c3fedb..2e2952037 100644
--- a/docs/images/samples/geo/usa_adjusted_dark.svg
+++ b/docs/images/samples/geo/usa_adjusted_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 7.864832218167692 L0.0 462.1351677818323 L705.0 462.1351677818323 L705.0 7.864832218167692 Z">
     </path>
     <g transform="translate(21.0 13.864832218167692 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.2703355636646)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.2703355636646)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -505,7 +505,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="408.2703355636646">
             </rect>
           </clipPath>
@@ -527,6 +527,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 7.864832218167692 L0.0 462.1351677818323 L705.0 462.1351677818323 L705.0 7.864832218167692 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/geo/usa_conus_albers.svg b/docs/images/samples/geo/usa_conus_albers.svg
index cb9c96ffe..1383210ea 100644
--- a/docs/images/samples/geo/usa_conus_albers.svg
+++ b/docs/images/samples/geo/usa_conus_albers.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (54.95712304215423, 0.0), (623.0428769578458, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (54.95712304215423, 0.0), (623.0428769578458, 408.0)]">
         <g transform="translate(54.95712304215423 0.0 ) ">
           <g>
             <g>
@@ -379,7 +379,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="54.95712304215423" y="0.0" width="623.0428769578458" height="408.0">
             </rect>
           </clipPath>
@@ -544,6 +544,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/geo/usa_conus_albers_dark.svg b/docs/images/samples/geo/usa_conus_albers_dark.svg
index ba9736e18..c95d6f1d7 100644
--- a/docs/images/samples/geo/usa_conus_albers_dark.svg
+++ b/docs/images/samples/geo/usa_conus_albers_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -313,7 +313,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (54.95712304215423, 0.0), (623.0428769578458, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (54.95712304215423, 0.0), (623.0428769578458, 408.0)]">
         <g transform="translate(54.95712304215423 0.0 ) ">
           <g>
             <g>
@@ -517,7 +517,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="54.95712304215423" y="0.0" width="623.0428769578458" height="408.0">
             </rect>
           </clipPath>
@@ -544,6 +544,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/geo/usa_election_results_joined.svg b/docs/images/samples/geo/usa_election_results_joined.svg
index c1459f5ed..86f7fecea 100644
--- a/docs/images/samples/geo/usa_election_results_joined.svg
+++ b/docs/images/samples/geo/usa_election_results_joined.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 6.670670252501083 L0.0 496.32932974749895 L705.0 496.32932974749895 L705.0 6.670670252501083 Z">
     </path>
     <g transform="translate(6.0 61.67067025250108 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (693.0, 428.65865949499783)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (693.0, 428.65865949499783)]">
         <g transform="">
           <g>
             <g>
@@ -355,7 +355,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="693.0" height="428.65865949499783">
             </rect>
           </clipPath>
@@ -415,6 +415,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 6.670670252501083 L0.0 496.32932974749895 L705.0 496.32932974749895 L705.0 6.670670252501083 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/geo/usa_election_results_joined_dark.svg b/docs/images/samples/geo/usa_election_results_joined_dark.svg
index 9aea8f426..aa2ba42cd 100644
--- a/docs/images/samples/geo/usa_election_results_joined_dark.svg
+++ b/docs/images/samples/geo/usa_election_results_joined_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 6.670670252501083 L0.0 496.32932974749895 L705.0 496.32932974749895 L705.0 6.670670252501083 Z">
     </path>
     <g transform="translate(6.0 61.67067025250108 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (693.0, 428.65865949499783)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (693.0, 428.65865949499783)]">
         <g transform="">
           <g>
             <g>
@@ -355,7 +355,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="693.0" height="428.65865949499783">
             </rect>
           </clipPath>
@@ -415,6 +415,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 6.670670252501083 L0.0 496.32932974749895 L705.0 496.32932974749895 L705.0 6.670670252501083 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/geo/usa_simple_poly_json.svg b/docs/images/samples/geo/usa_simple_poly_json.svg
index 448433e29..c9b8e9272 100644
--- a/docs/images/samples/geo/usa_simple_poly_json.svg
+++ b/docs/images/samples/geo/usa_simple_poly_json.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -395,7 +395,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -563,6 +563,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/geo/usa_simple_poly_json_dark.svg b/docs/images/samples/geo/usa_simple_poly_json_dark.svg
index c2a5aa7db..3c5da09ef 100644
--- a/docs/images/samples/geo/usa_simple_poly_json_dark.svg
+++ b/docs/images/samples/geo/usa_simple_poly_json_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -541,7 +541,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -563,6 +563,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/geo/usa_with_cities.svg b/docs/images/samples/geo/usa_with_cities.svg
index 69fcc46a4..2deb3708a 100644
--- a/docs/images/samples/geo/usa_with_cities.svg
+++ b/docs/images/samples/geo/usa_with_cities.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 42.331524782964834 L0.0 427.66847521703517 L705.0 427.66847521703517 L705.0 42.331524782964834 Z">
     </path>
     <g transform="translate(6.0 48.331524782964834 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (0.0, 0.0), (693.0, 373.33695043407033)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (0.0, 0.0), (693.0, 373.33695043407033)]">
         <g transform="">
           <g>
             <g>
@@ -387,13 +387,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="693.0" height="373.33695043407033">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="0.0" y="0.0" width="693.0" height="373.33695043407033">
             </rect>
           </clipPath>
@@ -405,6 +405,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 42.331524782964834 L0.0 427.66847521703517 L705.0 427.66847521703517 L705.0 42.331524782964834 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/geo/usa_with_cities_dark.svg b/docs/images/samples/geo/usa_with_cities_dark.svg
index 35608b3d1..da788fd59 100644
--- a/docs/images/samples/geo/usa_with_cities_dark.svg
+++ b/docs/images/samples/geo/usa_with_cities_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 42.331524782964834 L0.0 427.66847521703517 L705.0 427.66847521703517 L705.0 42.331524782964834 Z">
     </path>
     <g transform="translate(6.0 48.331524782964834 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (0.0, 0.0), (693.0, 373.33695043407033)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (0.0, 0.0), (693.0, 373.33695043407033)]">
         <g transform="">
           <g>
             <g>
@@ -387,13 +387,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="693.0" height="373.33695043407033">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="0.0" y="0.0" width="693.0" height="373.33695043407033">
             </rect>
           </clipPath>
@@ -405,6 +405,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 42.331524782964834 L0.0 427.66847521703517 L705.0 427.66847521703517 L705.0 42.331524782964834 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/heatmap/heatmap_settings.svg b/docs/images/samples/heatmap/heatmap_settings.svg
index f17158770..ed9162b5a 100644
--- a/docs/images/samples/heatmap/heatmap_settings.svg
+++ b/docs/images/samples/heatmap/heatmap_settings.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -157,7 +157,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (569.2898490731178, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (569.2898490731178, 424.0)]">
         <g transform="translate(9.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="9.980605455468202" y="0.0" width="569.2898490731178" height="424.0">
             </rect>
           </clipPath>
@@ -358,6 +358,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/heatmap/heatmap_settings_dark.svg b/docs/images/samples/heatmap/heatmap_settings_dark.svg
index a1cead27b..6238a22ac 100644
--- a/docs/images/samples/heatmap/heatmap_settings_dark.svg
+++ b/docs/images/samples/heatmap/heatmap_settings_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -220,7 +220,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (569.2898490731178, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (569.2898490731178, 424.0)]">
         <g transform="translate(9.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -242,7 +242,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="9.980605455468202" y="0.0" width="569.2898490731178" height="424.0">
             </rect>
           </clipPath>
@@ -358,6 +358,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/heatmap/heatmap_simple.svg b/docs/images/samples/heatmap/heatmap_simple.svg
index e381350b7..c0a8d7778 100644
--- a/docs/images/samples/heatmap/heatmap_simple.svg
+++ b/docs/images/samples/heatmap/heatmap_simple.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -163,7 +163,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (44.06940244056283, 0.0), (581.2430066388013, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (44.06940244056283, 0.0), (581.2430066388013, 424.0)]">
         <g transform="translate(44.06940244056283 0.0 ) ">
           <g>
             <g>
@@ -196,7 +196,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="44.06940244056283" y="0.0" width="581.2430066388013" height="424.0">
             </rect>
           </clipPath>
@@ -399,6 +399,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/heatmap/heatmap_simple_dark.svg b/docs/images/samples/heatmap/heatmap_simple_dark.svg
index 212f8d5d8..c45262fab 100644
--- a/docs/images/samples/heatmap/heatmap_simple_dark.svg
+++ b/docs/images/samples/heatmap/heatmap_simple_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -253,7 +253,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (44.06940244056283, 0.0), (581.2430066388013, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (44.06940244056283, 0.0), (581.2430066388013, 424.0)]">
         <g transform="translate(44.06940244056283 0.0 ) ">
           <g>
             <g>
@@ -286,7 +286,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="44.06940244056283" y="0.0" width="581.2430066388013" height="424.0">
             </rect>
           </clipPath>
@@ -399,6 +399,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/histogram/histogram_grouped.svg b/docs/images/samples/histogram/histogram_grouped.svg
index fef99b6b2..9e0a29cc1 100644
--- a/docs/images/samples/histogram/histogram_grouped.svg
+++ b/docs/images/samples/histogram/histogram_grouped.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (599.3705927129594, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (599.3705927129594, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -263,7 +263,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="599.3705927129594" height="424.0">
             </rect>
           </clipPath>
@@ -466,6 +466,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/histogram/histogram_grouped_dark.svg b/docs/images/samples/histogram/histogram_grouped_dark.svg
index 6c9611f30..3c619745a 100644
--- a/docs/images/samples/histogram/histogram_grouped_dark.svg
+++ b/docs/images/samples/histogram/histogram_grouped_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -313,7 +313,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (599.3705927129594, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (599.3705927129594, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -401,7 +401,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="599.3705927129594" height="424.0">
             </rect>
           </clipPath>
@@ -466,6 +466,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/histogram/histogram_settings.svg b/docs/images/samples/histogram/histogram_settings.svg
index cb4491cc0..d3651d1cb 100644
--- a/docs/images/samples/histogram/histogram_settings.svg
+++ b/docs/images/samples/histogram/histogram_settings.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -211,7 +211,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="408.0">
             </rect>
           </clipPath>
@@ -392,6 +392,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/histogram/histogram_settings_dark.svg b/docs/images/samples/histogram/histogram_settings_dark.svg
index 61ad12583..f149c2034 100644
--- a/docs/images/samples/histogram/histogram_settings_dark.svg
+++ b/docs/images/samples/histogram/histogram_settings_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -333,7 +333,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 408.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -365,7 +365,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="408.0">
             </rect>
           </clipPath>
@@ -392,6 +392,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/histogram/histogram_simple.svg b/docs/images/samples/histogram/histogram_simple.svg
index d25e2928a..642c5ace5 100644
--- a/docs/images/samples/histogram/histogram_simple.svg
+++ b/docs/images/samples/histogram/histogram_simple.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -219,7 +219,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="424.0">
             </rect>
           </clipPath>
@@ -359,6 +359,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/histogram/histogram_simple_dark.svg b/docs/images/samples/histogram/histogram_simple_dark.svg
index 27ff511ff..1d123ae4d 100644
--- a/docs/images/samples/histogram/histogram_simple_dark.svg
+++ b/docs/images/samples/histogram/histogram_simple_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -337,7 +337,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="424.0">
             </rect>
           </clipPath>
@@ -359,6 +359,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/histogram/histogram_with_line.svg b/docs/images/samples/histogram/histogram_with_line.svg
index debe9fcfe..a8809abeb 100644
--- a/docs/images/samples/histogram/histogram_with_line.svg
+++ b/docs/images/samples/histogram/histogram_with_line.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -219,13 +219,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="424.0">
             </rect>
           </clipPath>
@@ -379,6 +379,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/histogram/histogram_with_line_dark.svg b/docs/images/samples/histogram/histogram_with_line_dark.svg
index e097703d8..21cdfcde2 100644
--- a/docs/images/samples/histogram/histogram_with_line_dark.svg
+++ b/docs/images/samples/histogram/histogram_with_line_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -307,7 +307,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -351,13 +351,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="424.0">
             </rect>
           </clipPath>
@@ -379,6 +379,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/layout/axis_and_legend_configuration.svg b/docs/images/samples/layout/axis_and_legend_configuration.svg
index ae5180711..034c8859a 100644
--- a/docs/images/samples/layout/axis_and_legend_configuration.svg
+++ b/docs/images/samples/layout/axis_and_legend_configuration.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -163,7 +163,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (523.8388130114806, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (523.8388130114806, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -409,7 +409,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="523.8388130114806" height="424.0">
             </rect>
           </clipPath>
@@ -689,6 +689,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/layout/axis_and_legend_configuration_dark.svg b/docs/images/samples/layout/axis_and_legend_configuration_dark.svg
index 5f8f3a5fd..900066def 100644
--- a/docs/images/samples/layout/axis_and_legend_configuration_dark.svg
+++ b/docs/images/samples/layout/axis_and_legend_configuration_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -251,7 +251,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (523.8388130114806, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (523.8388130114806, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -497,7 +497,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="523.8388130114806" height="424.0">
             </rect>
           </clipPath>
@@ -689,6 +689,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/layout/base_layout_settings.svg b/docs/images/samples/layout/base_layout_settings.svg
index be8a19151..13745b17e 100644
--- a/docs/images/samples/layout/base_layout_settings.svg
+++ b/docs/images/samples/layout/base_layout_settings.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 264.0 L705.0 264.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 202.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 202.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -181,7 +181,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="202.0">
             </rect>
           </clipPath>
@@ -323,6 +323,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 264.0 L705.0 264.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/layout/base_layout_settings_dark.svg b/docs/images/samples/layout/base_layout_settings_dark.svg
index 85c1e45b0..7b54f300e 100644
--- a/docs/images/samples/layout/base_layout_settings_dark.svg
+++ b/docs/images/samples/layout/base_layout_settings_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 264.0 L705.0 264.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -284,7 +284,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 202.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 202.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -296,7 +296,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="202.0">
             </rect>
           </clipPath>
@@ -323,6 +323,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 264.0 L705.0 264.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/layout/preview_base_layout_settings.svg b/docs/images/samples/layout/preview_base_layout_settings.svg
index 1b8db547c..3cd73eb60 100644
--- a/docs/images/samples/layout/preview_base_layout_settings.svg
+++ b/docs/images/samples/layout/preview_base_layout_settings.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (555.0387890890636, 338.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (555.0387890890636, 338.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="555.0387890890636" height="338.0">
             </rect>
           </clipPath>
@@ -350,6 +350,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/layout/preview_base_layout_settings_dark.svg b/docs/images/samples/layout/preview_base_layout_settings_dark.svg
index 28a897bed..507e4e290 100644
--- a/docs/images/samples/layout/preview_base_layout_settings_dark.svg
+++ b/docs/images/samples/layout/preview_base_layout_settings_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -311,7 +311,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (555.0387890890636, 338.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (555.0387890890636, 338.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -323,7 +323,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="555.0387890890636" height="338.0">
             </rect>
           </clipPath>
@@ -350,6 +350,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/layout/preview_subtitle_and_caption.svg b/docs/images/samples/layout/preview_subtitle_and_caption.svg
index e1ce38a96..a0a10c17f 100644
--- a/docs/images/samples/layout/preview_subtitle_and_caption.svg
+++ b/docs/images/samples/layout/preview_subtitle_and_caption.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z">
     </path>
     <g transform="translate(21.0 57.0 ) ">
@@ -161,7 +161,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (555.0387890890636, 290.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (555.0387890890636, 290.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="555.0387890890636" height="290.0">
             </rect>
           </clipPath>
@@ -298,6 +298,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/layout/preview_subtitle_and_caption_dark.svg b/docs/images/samples/layout/preview_subtitle_and_caption_dark.svg
index 9a04b6305..9fd624fa5 100644
--- a/docs/images/samples/layout/preview_subtitle_and_caption_dark.svg
+++ b/docs/images/samples/layout/preview_subtitle_and_caption_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z">
     </path>
     <g transform="translate(21.0 57.0 ) ">
@@ -240,7 +240,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (555.0387890890636, 290.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (555.0387890890636, 290.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -258,7 +258,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="555.0387890890636" height="290.0">
             </rect>
           </clipPath>
@@ -298,6 +298,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/layout/subtitle_and_caption.svg b/docs/images/samples/layout/subtitle_and_caption.svg
index 570598202..718393ad8 100644
--- a/docs/images/samples/layout/subtitle_and_caption.svg
+++ b/docs/images/samples/layout/subtitle_and_caption.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 57.0 ) ">
@@ -161,7 +161,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 242.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 242.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="242.0">
             </rect>
           </clipPath>
@@ -298,6 +298,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/layout/subtitle_and_caption_dark.svg b/docs/images/samples/layout/subtitle_and_caption_dark.svg
index 4720cb927..c2949ef45 100644
--- a/docs/images/samples/layout/subtitle_and_caption_dark.svg
+++ b/docs/images/samples/layout/subtitle_and_caption_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 57.0 ) ">
@@ -240,7 +240,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 242.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 242.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -258,7 +258,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="242.0">
             </rect>
           </clipPath>
@@ -298,6 +298,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 352.0 L705.0 352.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/line_and_path_comp_2.svg b/docs/images/samples/line/line_and_path_comp_2.svg
index 714c3577b..0a7b14cc1 100644
--- a/docs/images/samples/line/line_and_path_comp_2.svg
+++ b/docs/images/samples/line/line_and_path_comp_2.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="235.0" width="705.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -292,7 +292,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (299.5387890890636, 161.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (299.5387890890636, 161.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -304,7 +304,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.961210910936405" y="0.0" width="299.5387890890636" height="161.0">
               </rect>
             </clipPath>
@@ -394,7 +394,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="344.5" height="223.0" x="354.5" y="6.0">
@@ -409,117 +409,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -528,7 +528,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -556,7 +556,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (299.5387890890636, 161.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (299.5387890890636, 161.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -568,7 +568,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.961210910936405" y="0.0" width="299.5387890890636" height="161.0">
               </rect>
             </clipPath>
@@ -658,7 +658,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/line_and_path_comp_2_dark.svg b/docs/images/samples/line/line_and_path_comp_2_dark.svg
index 9c16bd05b..8be77762a 100644
--- a/docs/images/samples/line/line_and_path_comp_2_dark.svg
+++ b/docs/images/samples/line/line_and_path_comp_2_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="235.0" width="705.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -355,7 +355,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (299.5387890890636, 161.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (299.5387890890636, 161.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -367,7 +367,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.961210910936405" y="0.0" width="299.5387890890636" height="161.0">
               </rect>
             </clipPath>
@@ -394,7 +394,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="344.5" height="223.0" x="354.5" y="6.0">
@@ -409,117 +409,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -528,7 +528,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -619,7 +619,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (299.5387890890636, 161.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (299.5387890890636, 161.0)]">
           <g transform="translate(17.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -631,7 +631,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.961210910936405" y="0.0" width="299.5387890890636" height="161.0">
               </rect>
             </clipPath>
@@ -658,7 +658,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 223.0 L344.5 223.0 L344.5 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/line_by_fun.svg b/docs/images/samples/line/line_by_fun.svg
index 771ca040d..72b77649e 100644
--- a/docs/images/samples/line/line_by_fun.svg
+++ b/docs/images/samples/line/line_by_fun.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -183,7 +183,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
         <g transform="translate(31.015306675749617 0.0 ) ">
           <g>
             <g>
@@ -199,13 +199,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.015306675749617" y="0.0" width="646.9846933242504" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="31.015306675749617" y="0.0" width="646.9846933242504" height="424.0">
             </rect>
           </clipPath>
@@ -391,6 +391,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/line_by_fun_dark.svg b/docs/images/samples/line/line_by_fun_dark.svg
index 377984abc..863e06c7c 100644
--- a/docs/images/samples/line/line_by_fun_dark.svg
+++ b/docs/images/samples/line/line_by_fun_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -347,7 +347,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
         <g transform="translate(31.015306675749617 0.0 ) ">
           <g>
             <g>
@@ -363,13 +363,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.015306675749617" y="0.0" width="646.9846933242504" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="31.015306675749617" y="0.0" width="646.9846933242504" height="424.0">
             </rect>
           </clipPath>
@@ -391,6 +391,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/line_color_gradient.svg b/docs/images/samples/line/line_color_gradient.svg
index 77a25ddaf..23d1cb8af 100644
--- a/docs/images/samples/line/line_color_gradient.svg
+++ b/docs/images/samples/line/line_color_gradient.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -183,7 +183,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (599.1066699949249, 365.73695078369224)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (599.1066699949249, 365.73695078369224)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -239,7 +239,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="599.1066699949249" height="365.73695078369224">
             </rect>
           </clipPath>
@@ -540,6 +540,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/line_color_gradient_dark.svg b/docs/images/samples/line/line_color_gradient_dark.svg
index 4e2ebad1e..c6a2abc8b 100644
--- a/docs/images/samples/line/line_color_gradient_dark.svg
+++ b/docs/images/samples/line/line_color_gradient_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -353,7 +353,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (599.1066699949249, 365.73695078369224)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (599.1066699949249, 365.73695078369224)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -409,7 +409,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="599.1066699949249" height="365.73695078369224">
             </rect>
           </clipPath>
@@ -540,6 +540,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/line_fixed_coord.svg b/docs/images/samples/line/line_fixed_coord.svg
index 8ead536ea..d0950d603 100644
--- a/docs/images/samples/line/line_fixed_coord.svg
+++ b/docs/images/samples/line/line_fixed_coord.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -189,13 +189,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -335,6 +335,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/line_fixed_coord_dark.svg b/docs/images/samples/line/line_fixed_coord_dark.svg
index 39ff36d31..1447886f2 100644
--- a/docs/images/samples/line/line_fixed_coord_dark.svg
+++ b/docs/images/samples/line/line_fixed_coord_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -307,13 +307,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -335,6 +335,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/line_mark.svg b/docs/images/samples/line/line_mark.svg
index 57976e800..47aa2e6c3 100644
--- a/docs/images/samples/line/line_mark.svg
+++ b/docs/images/samples/line/line_mark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 317.0 L705.0 317.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (577.5942098989958, 212.7369507836922)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (577.5942098989958, 212.7369507836922)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -203,19 +203,19 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="577.5942098989958" height="212.7369507836922">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="577.5942098989958" height="212.7369507836922">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="17.961210910936405" y="0.0" width="577.5942098989958" height="212.7369507836922">
             </rect>
           </clipPath>
@@ -436,6 +436,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 317.0 L705.0 317.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/line_mark_dark.svg b/docs/images/samples/line/line_mark_dark.svg
index c9e1fb359..f18c4fe3d 100644
--- a/docs/images/samples/line/line_mark_dark.svg
+++ b/docs/images/samples/line/line_mark_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 317.0 L705.0 317.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -335,7 +335,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (577.5942098989958, 212.7369507836922)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (577.5942098989958, 212.7369507836922)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -359,19 +359,19 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="577.5942098989958" height="212.7369507836922">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="577.5942098989958" height="212.7369507836922">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="17.961210910936405" y="0.0" width="577.5942098989958" height="212.7369507836922">
             </rect>
           </clipPath>
@@ -436,6 +436,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 317.0 L705.0 317.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/line_reversed_axis.svg b/docs/images/samples/line/line_reversed_axis.svg
index 9401a2a4c..df1a58159 100644
--- a/docs/images/samples/line/line_reversed_axis.svg
+++ b/docs/images/samples/line/line_reversed_axis.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (13.365479477239004, 0.0), (664.634520522761, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (13.365479477239004, 0.0), (664.634520522761, 424.0)]">
         <g transform="translate(13.365479477239004 0.0 ) ">
           <g>
             <g>
@@ -181,7 +181,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="13.365479477239004" y="0.0" width="664.634520522761" height="424.0">
             </rect>
           </clipPath>
@@ -314,6 +314,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/line_reversed_axis_dark.svg b/docs/images/samples/line/line_reversed_axis_dark.svg
index 163830cf8..7c5b192f2 100644
--- a/docs/images/samples/line/line_reversed_axis_dark.svg
+++ b/docs/images/samples/line/line_reversed_axis_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -280,7 +280,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (13.365479477239004, 0.0), (664.634520522761, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (13.365479477239004, 0.0), (664.634520522761, 424.0)]">
         <g transform="translate(13.365479477239004 0.0 ) ">
           <g>
             <g>
@@ -292,7 +292,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="13.365479477239004" y="0.0" width="664.634520522761" height="424.0">
             </rect>
           </clipPath>
@@ -314,6 +314,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/line_with_points.svg b/docs/images/samples/line/line_with_points.svg
index 0afc1550c..d6e5c109b 100644
--- a/docs/images/samples/line/line_with_points.svg
+++ b/docs/images/samples/line/line_with_points.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -198,13 +198,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -353,6 +353,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/line_with_points_dark.svg b/docs/images/samples/line/line_with_points_dark.svg
index fcaab24c2..2ffda34cb 100644
--- a/docs/images/samples/line/line_with_points_dark.svg
+++ b/docs/images/samples/line/line_with_points_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -300,7 +300,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -325,13 +325,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -353,6 +353,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/path_line.svg b/docs/images/samples/line/path_line.svg
index f6e616bdf..be2845816 100644
--- a/docs/images/samples/line/path_line.svg
+++ b/docs/images/samples/line/path_line.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 41.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 389.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 389.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -191,7 +191,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="389.0">
             </rect>
           </clipPath>
@@ -377,6 +377,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/path_line_dark.svg b/docs/images/samples/line/path_line_dark.svg
index 2b129ccc7..1c7a5ad6d 100644
--- a/docs/images/samples/line/path_line_dark.svg
+++ b/docs/images/samples/line/path_line_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 41.0 ) ">
@@ -333,7 +333,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 389.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 389.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -345,7 +345,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="389.0">
             </rect>
           </clipPath>
@@ -377,6 +377,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/preview_line_and_path_comp_2.svg b/docs/images/samples/line/preview_line_and_path_comp_2.svg
index 3597d9182..e8bbe25b5 100644
--- a/docs/images/samples/line/preview_line_and_path_comp_2.svg
+++ b/docs/images/samples/line/preview_line_and_path_comp_2.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="400.0" width="600.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L292.0 388.0 L292.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -298,7 +298,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (233.98469332425037, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (233.98469332425037, 326.0)]">
           <g transform="translate(31.015306675749617 0.0 ) ">
             <g>
               <g>
@@ -310,7 +310,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="31.015306675749617" y="0.0" width="233.98469332425037" height="326.0">
               </rect>
             </clipPath>
@@ -421,7 +421,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L292.0 388.0 L292.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="292.0" height="388.0" x="302.0" y="6.0">
@@ -436,117 +436,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -555,7 +555,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L292.0 388.0 L292.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -589,7 +589,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (233.98469332425037, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (233.98469332425037, 326.0)]">
           <g transform="translate(31.015306675749617 0.0 ) ">
             <g>
               <g>
@@ -601,7 +601,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="31.015306675749617" y="0.0" width="233.98469332425037" height="326.0">
               </rect>
             </clipPath>
@@ -712,7 +712,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L292.0 388.0 L292.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/preview_line_and_path_comp_2_dark.svg b/docs/images/samples/line/preview_line_and_path_comp_2_dark.svg
index 17734fb1b..50f1de3b0 100644
--- a/docs/images/samples/line/preview_line_and_path_comp_2_dark.svg
+++ b/docs/images/samples/line/preview_line_and_path_comp_2_dark.svg
@@ -10,54 +10,54 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -71,14 +71,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -92,14 +92,14 @@ font-weight: normal;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <rect x="0.0" y="0.0" height="400.0" width="600.0" fill="rgb(255,255,255)" fill-opacity="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0">
     </rect>
   </g>
@@ -145,117 +145,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx1 .plot-title {
+#_sample_helper_static_id_prefix_1 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx1 .plot-subtitle {
+#_sample_helper_static_id_prefix_1 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .plot-caption {
+#_sample_helper_static_id_prefix_1 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .hyperlink-element {
+#_sample_helper_static_id_prefix_1 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx1 .legend-title {
+#_sample_helper_static_id_prefix_1 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .legend-item {
+#_sample_helper_static_id_prefix_1 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-x {
+#_sample_helper_static_id_prefix_1 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-x {
+#_sample_helper_static_id_prefix_1 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .axis-title-y {
+#_sample_helper_static_id_prefix_1 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx1 .axis-text-y {
+#_sample_helper_static_id_prefix_1 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx1 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_1 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -264,7 +264,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx1">
+    <g id="_sample_helper_static_id_prefix_1">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L292.0 388.0 L292.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -382,7 +382,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (233.98469332425037, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (233.98469332425037, 326.0)]">
           <g transform="translate(31.015306675749617 0.0 ) ">
             <g>
               <g>
@@ -394,7 +394,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="31.015306675749617" y="0.0" width="233.98469332425037" height="326.0">
               </rect>
             </clipPath>
@@ -421,7 +421,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L292.0 388.0 L292.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx3">
+    <g id="_sample_helper_static_id_prefix_3">
     </g>
   </svg>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="292.0" height="388.0" x="302.0" y="6.0">
@@ -436,117 +436,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx4 .plot-title {
+#_sample_helper_static_id_prefix_4 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx4 .plot-subtitle {
+#_sample_helper_static_id_prefix_4 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .plot-caption {
+#_sample_helper_static_id_prefix_4 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .hyperlink-element {
+#_sample_helper_static_id_prefix_4 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx4 .legend-title {
+#_sample_helper_static_id_prefix_4 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .legend-item {
+#_sample_helper_static_id_prefix_4 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-x {
+#_sample_helper_static_id_prefix_4 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-x {
+#_sample_helper_static_id_prefix_4 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-title-y {
+#_sample_helper_static_id_prefix_4 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx4 .axis-text-y {
+#_sample_helper_static_id_prefix_4 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_4 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-text {
+#_sample_helper_static_id_prefix_6 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-title {
+#_sample_helper_static_id_prefix_6 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .tooltip-label {
+#_sample_helper_static_id_prefix_6 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -555,7 +555,7 @@ font-size: 13.0px;
 }
 
     </style>
-    <g id="xXxprefixXx4">
+    <g id="_sample_helper_static_id_prefix_4">
       <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 388.0 L292.0 388.0 L292.0 0.0 Z">
       </path>
       <g transform="translate(21.0 22.0 ) ">
@@ -673,7 +673,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (233.98469332425037, 326.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (233.98469332425037, 326.0)]">
           <g transform="translate(31.015306675749617 0.0 ) ">
             <g>
               <g>
@@ -685,7 +685,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="31.015306675749617" y="0.0" width="233.98469332425037" height="326.0">
               </rect>
             </clipPath>
@@ -712,7 +712,7 @@ font-size: 13.0px;
       <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 388.0 L292.0 388.0 L292.0 0.0 Z" pointer-events="none">
       </path>
     </g>
-    <g id="xXxprefixXx6">
+    <g id="_sample_helper_static_id_prefix_6">
     </g>
   </svg>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/preview_line_mark.svg b/docs/images/samples/line/preview_line_mark.svg
index 3d5084cb8..ea851d375 100644
--- a/docs/images/samples/line/preview_line_mark.svg
+++ b/docs/images/samples/line/preview_line_mark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (472.59420989899587, 295.73695078369224)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (472.59420989899587, 295.73695078369224)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -203,19 +203,19 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="472.59420989899587" height="295.73695078369224">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="472.59420989899587" height="295.73695078369224">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="17.961210910936405" y="0.0" width="472.59420989899587" height="295.73695078369224">
             </rect>
           </clipPath>
@@ -436,6 +436,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/preview_line_mark_dark.svg b/docs/images/samples/line/preview_line_mark_dark.svg
index fd840988b..76a114a94 100644
--- a/docs/images/samples/line/preview_line_mark_dark.svg
+++ b/docs/images/samples/line/preview_line_mark_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_4 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-text {
+#_sample_helper_static_id_prefix_4 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-title {
+#_sample_helper_static_id_prefix_4 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx4 .tooltip-label {
+#_sample_helper_static_id_prefix_4 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -335,7 +335,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (472.59420989899587, 295.73695078369224)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (472.59420989899587, 295.73695078369224)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -359,19 +359,19 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="472.59420989899587" height="295.73695078369224">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="472.59420989899587" height="295.73695078369224">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="17.961210910936405" y="0.0" width="472.59420989899587" height="295.73695078369224">
             </rect>
           </clipPath>
@@ -436,6 +436,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx4">
+  <g id="_sample_helper_static_id_prefix_4">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/several_lines.svg b/docs/images/samples/line/several_lines.svg
index d743da08f..6324d67b6 100644
--- a/docs/images/samples/line/several_lines.svg
+++ b/docs/images/samples/line/several_lines.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -185,7 +185,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (537.0427250926342, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (537.0427250926342, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -205,7 +205,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="537.0427250926342" height="424.0">
             </rect>
           </clipPath>
@@ -456,6 +456,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/several_lines_dark.svg b/docs/images/samples/line/several_lines_dark.svg
index 91b59dd79..6ed9bc3e7 100644
--- a/docs/images/samples/line/several_lines_dark.svg
+++ b/docs/images/samples/line/several_lines_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -356,7 +356,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (537.0427250926342, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (537.0427250926342, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -376,7 +376,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="537.0427250926342" height="424.0">
             </rect>
           </clipPath>
@@ -456,6 +456,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/simple_line.svg b/docs/images/samples/line/simple_line.svg
index 8a3d7e0c2..4129836f5 100644
--- a/docs/images/samples/line/simple_line.svg
+++ b/docs/images/samples/line/simple_line.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -177,7 +177,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -189,7 +189,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -346,6 +346,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/simple_line_dark.svg b/docs/images/samples/line/simple_line_dark.svg
index 75e78494c..d469a6a29 100644
--- a/docs/images/samples/line/simple_line_dark.svg
+++ b/docs/images/samples/line/simple_line_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -312,7 +312,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -324,7 +324,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -346,6 +346,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/simple_line_settings.svg b/docs/images/samples/line/simple_line_settings.svg
index 3a64a3fc4..5010292ab 100644
--- a/docs/images/samples/line/simple_line_settings.svg
+++ b/docs/images/samples/line/simple_line_settings.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -181,7 +181,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 357.193945445318)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 357.193945445318)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -193,7 +193,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="357.193945445318">
             </rect>
           </clipPath>
@@ -374,6 +374,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/simple_line_settings_dark.svg b/docs/images/samples/line/simple_line_settings_dark.svg
index 297f0fe36..c944649f6 100644
--- a/docs/images/samples/line/simple_line_settings_dark.svg
+++ b/docs/images/samples/line/simple_line_settings_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -340,7 +340,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 357.193945445318)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 357.193945445318)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -352,7 +352,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="357.193945445318">
             </rect>
           </clipPath>
@@ -374,6 +374,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/smoothed_curve_with_points.svg b/docs/images/samples/line/smoothed_curve_with_points.svg
index 45f8e167b..ef64d4642 100644
--- a/docs/images/samples/line/smoothed_curve_with_points.svg
+++ b/docs/images/samples/line/smoothed_curve_with_points.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -200,13 +200,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -346,6 +346,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/smoothed_curve_with_points_dark.svg b/docs/images/samples/line/smoothed_curve_with_points_dark.svg
index 1d89f12bd..877fbc0d4 100644
--- a/docs/images/samples/line/smoothed_curve_with_points_dark.svg
+++ b/docs/images/samples/line/smoothed_curve_with_points_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -318,13 +318,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -346,6 +346,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/smoothed_line.svg b/docs/images/samples/line/smoothed_line.svg
index 9c83e6722..b9626aae5 100644
--- a/docs/images/samples/line/smoothed_line.svg
+++ b/docs/images/samples/line/smoothed_line.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -181,7 +181,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -314,6 +314,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/smoothed_line_dark.svg b/docs/images/samples/line/smoothed_line_dark.svg
index b6593e199..bf48f3ed1 100644
--- a/docs/images/samples/line/smoothed_line_dark.svg
+++ b/docs/images/samples/line/smoothed_line_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -280,7 +280,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -292,7 +292,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -314,6 +314,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/step_line.svg b/docs/images/samples/line/step_line.svg
index 64c3f4a91..ad1741e5e 100644
--- a/docs/images/samples/line/step_line.svg
+++ b/docs/images/samples/line/step_line.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_7 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_7 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .tooltip-text {
+#_sample_helper_static_id_prefix_7 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .tooltip-title {
+#_sample_helper_static_id_prefix_7 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .tooltip-label {
+#_sample_helper_static_id_prefix_7 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 408.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -256,37 +256,37 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="408.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="408.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="408.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="408.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="408.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx6">
+          <clipPath id="_sample_helper_static_id_prefix_6">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="408.0">
             </rect>
           </clipPath>
@@ -459,6 +459,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx7">
+  <g id="_sample_helper_static_id_prefix_7">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/line/step_line_dark.svg b/docs/images/samples/line/step_line_dark.svg
index 6de0472ee..81e89eec6 100644
--- a/docs/images/samples/line/step_line_dark.svg
+++ b/docs/images/samples/line/step_line_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_7 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_7 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .tooltip-text {
+#_sample_helper_static_id_prefix_7 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .tooltip-title {
+#_sample_helper_static_id_prefix_7 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx7 .tooltip-label {
+#_sample_helper_static_id_prefix_7 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 408.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -402,37 +402,37 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="408.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="408.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="408.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="408.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="408.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx6">
+          <clipPath id="_sample_helper_static_id_prefix_6">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="408.0">
             </rect>
           </clipPath>
@@ -459,6 +459,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx7">
+  <g id="_sample_helper_static_id_prefix_7">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/pie/nightingale_chart.svg b/docs/images/samples/pie/nightingale_chart.svg
index e035976ec..efd5fdbdf 100644
--- a/docs/images/samples/pie/nightingale_chart.svg
+++ b/docs/images/samples/pie/nightingale_chart.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(6.0 6.0 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (628.6830068840904, 458.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (628.6830068840904, 458.0)]">
         <g transform="">
           <g>
             <g>
@@ -215,7 +215,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="628.6830068840904" height="458.0">
             </rect>
           </clipPath>
@@ -315,6 +315,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/pie/nightingale_chart_dark.svg b/docs/images/samples/pie/nightingale_chart_dark.svg
index 3f51c8576..a08554c5b 100644
--- a/docs/images/samples/pie/nightingale_chart_dark.svg
+++ b/docs/images/samples/pie/nightingale_chart_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(6.0 6.0 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (628.6830068840904, 458.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (628.6830068840904, 458.0)]">
         <g transform="">
           <g>
             <g>
@@ -215,7 +215,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="628.6830068840904" height="458.0">
             </rect>
           </clipPath>
@@ -315,6 +315,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/pie/pie_base.svg b/docs/images/samples/pie/pie_base.svg
index bd8d34c04..b6bb6e733 100644
--- a/docs/images/samples/pie/pie_base.svg
+++ b/docs/images/samples/pie/pie_base.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (598.6289111192773, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (598.6289111192773, 424.0)]">
         <g transform="translate(31.015306675749617 0.0 ) ">
           <g>
             <g>
@@ -255,7 +255,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.015306675749617" y="0.0" width="598.6289111192773" height="424.0">
             </rect>
           </clipPath>
@@ -532,6 +532,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/pie/pie_base_dark.svg b/docs/images/samples/pie/pie_base_dark.svg
index 7caccf6d2..4ac78a600 100644
--- a/docs/images/samples/pie/pie_base_dark.svg
+++ b/docs/images/samples/pie/pie_base_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -369,7 +369,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (598.6289111192773, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (598.6289111192773, 424.0)]">
         <g transform="translate(31.015306675749617 0.0 ) ">
           <g>
             <g>
@@ -437,7 +437,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.015306675749617" y="0.0" width="598.6289111192773" height="424.0">
             </rect>
           </clipPath>
@@ -532,6 +532,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/pie/pie_explode.svg b/docs/images/samples/pie/pie_explode.svg
index 12c7150b9..f786fa1f9 100644
--- a/docs/images/samples/pie/pie_explode.svg
+++ b/docs/images/samples/pie/pie_explode.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(6.0 6.0 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (588.7799796067495, 458.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (588.7799796067495, 458.0)]">
         <g transform="">
           <g>
             <g>
@@ -227,7 +227,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="588.7799796067495" height="458.0">
             </rect>
           </clipPath>
@@ -342,6 +342,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/pie/pie_explode_dark.svg b/docs/images/samples/pie/pie_explode_dark.svg
index dce8de2bd..58bf29f98 100644
--- a/docs/images/samples/pie/pie_explode_dark.svg
+++ b/docs/images/samples/pie/pie_explode_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(6.0 6.0 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (588.7799796067495, 458.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (588.7799796067495, 458.0)]">
         <g transform="">
           <g>
             <g>
@@ -227,7 +227,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="588.7799796067495" height="458.0">
             </rect>
           </clipPath>
@@ -342,6 +342,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/pie/pie_settings.svg b/docs/images/samples/pie/pie_settings.svg
index 0af64689a..a6ec4fefa 100644
--- a/docs/images/samples/pie/pie_settings.svg
+++ b/docs/images/samples/pie/pie_settings.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(6.0 6.0 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (585.965146914507, 458.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (585.965146914507, 458.0)]">
         <g transform="">
           <g>
             <g>
@@ -227,7 +227,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="585.965146914507" height="458.0">
             </rect>
           </clipPath>
@@ -342,6 +342,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/pie/pie_settings_dark.svg b/docs/images/samples/pie/pie_settings_dark.svg
index a3c1484d6..93828c772 100644
--- a/docs/images/samples/pie/pie_settings_dark.svg
+++ b/docs/images/samples/pie/pie_settings_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(6.0 6.0 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (585.965146914507, 458.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (585.965146914507, 458.0)]">
         <g transform="">
           <g>
             <g>
@@ -227,7 +227,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="585.965146914507" height="458.0">
             </rect>
           </clipPath>
@@ -342,6 +342,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/pie/pie_with_count.svg b/docs/images/samples/pie/pie_with_count.svg
index 0fa0c57ae..8ea1cc284 100644
--- a/docs/images/samples/pie/pie_with_count.svg
+++ b/docs/images/samples/pie/pie_with_count.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(6.0 6.0 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (610.1875726990258, 458.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (610.1875726990258, 458.0)]">
         <g transform="">
           <g>
             <g>
@@ -227,7 +227,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="610.1875726990258" height="458.0">
             </rect>
           </clipPath>
@@ -342,6 +342,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/pie/pie_with_count_dark.svg b/docs/images/samples/pie/pie_with_count_dark.svg
index 0b8b44952..8033d5960 100644
--- a/docs/images/samples/pie/pie_with_count_dark.svg
+++ b/docs/images/samples/pie/pie_with_count_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(6.0 6.0 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (610.1875726990258, 458.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (610.1875726990258, 458.0)]">
         <g transform="">
           <g>
             <g>
@@ -227,7 +227,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="610.1875726990258" height="458.0">
             </rect>
           </clipPath>
@@ -342,6 +342,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/pie/pie_with_void.svg b/docs/images/samples/pie/pie_with_void.svg
index 2c7226c96..5d6d52f9c 100644
--- a/docs/images/samples/pie/pie_with_void.svg
+++ b/docs/images/samples/pie/pie_with_void.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(6.0 6.0 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (593.8133348431107, 458.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (593.8133348431107, 458.0)]">
         <g transform="">
           <g>
             <g>
@@ -191,7 +191,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="593.8133348431107" height="458.0">
             </rect>
           </clipPath>
@@ -261,6 +261,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/pie/pie_with_void_dark.svg b/docs/images/samples/pie/pie_with_void_dark.svg
index 1c248d6a7..c1890391d 100644
--- a/docs/images/samples/pie/pie_with_void_dark.svg
+++ b/docs/images/samples/pie/pie_with_void_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(6.0 6.0 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (593.8133348431107, 458.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (593.8133348431107, 458.0)]">
         <g transform="">
           <g>
             <g>
@@ -191,7 +191,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="593.8133348431107" height="458.0">
             </rect>
           </clipPath>
@@ -261,6 +261,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/points/basic_points_plot.svg b/docs/images/samples/points/basic_points_plot.svg
index f7409dc4d..62be5d00a 100644
--- a/docs/images/samples/points/basic_points_plot.svg
+++ b/docs/images/samples/points/basic_points_plot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -204,7 +204,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -360,6 +360,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/points/basic_points_plot_dark.svg b/docs/images/samples/points/basic_points_plot_dark.svg
index c5b4aaa54..411f5e5c3 100644
--- a/docs/images/samples/points/basic_points_plot_dark.svg
+++ b/docs/images/samples/points/basic_points_plot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -309,7 +309,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -338,7 +338,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -360,6 +360,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/points/bubble_chart.svg b/docs/images/samples/points/bubble_chart.svg
index cd788389c..3683458b8 100644
--- a/docs/images/samples/points/bubble_chart.svg
+++ b/docs/images/samples/points/bubble_chart.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (31.79618173163473, 0.0), (531.1123741398574, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (31.79618173163473, 0.0), (531.1123741398574, 408.0)]">
         <g transform="translate(31.79618173163473 0.0 ) ">
           <g>
             <g>
@@ -209,7 +209,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.79618173163473" y="0.0" width="531.1123741398574" height="408.0">
             </rect>
           </clipPath>
@@ -461,6 +461,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/points/bubble_chart_dark.svg b/docs/images/samples/points/bubble_chart_dark.svg
index 500054302..1ea9665d5 100644
--- a/docs/images/samples/points/bubble_chart_dark.svg
+++ b/docs/images/samples/points/bubble_chart_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -267,7 +267,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (31.79618173163473, 0.0), (531.1123741398574, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (31.79618173163473, 0.0), (531.1123741398574, 408.0)]">
         <g transform="translate(31.79618173163473 0.0 ) ">
           <g>
             <g>
@@ -309,7 +309,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.79618173163473" y="0.0" width="531.1123741398574" height="408.0">
             </rect>
           </clipPath>
@@ -461,6 +461,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/points/complex_bubble_chart.svg b/docs/images/samples/points/complex_bubble_chart.svg
index 88be9bec1..947da6856 100644
--- a/docs/images/samples/points/complex_bubble_chart.svg
+++ b/docs/images/samples/points/complex_bubble_chart.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (591.1260645394567, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (591.1260645394567, 408.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -221,7 +221,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="591.1260645394567" height="408.0">
             </rect>
           </clipPath>
@@ -408,6 +408,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/points/complex_bubble_chart_dark.svg b/docs/images/samples/points/complex_bubble_chart_dark.svg
index 5392d7dab..c9bb4d6f4 100644
--- a/docs/images/samples/points/complex_bubble_chart_dark.svg
+++ b/docs/images/samples/points/complex_bubble_chart_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -291,7 +291,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (591.1260645394567, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (591.1260645394567, 408.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -341,7 +341,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="591.1260645394567" height="408.0">
             </rect>
           </clipPath>
@@ -408,6 +408,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/points/complex_bubble_chart_part2.svg b/docs/images/samples/points/complex_bubble_chart_part2.svg
index 9cab58773..55a185d62 100644
--- a/docs/images/samples/points/complex_bubble_chart_part2.svg
+++ b/docs/images/samples/points/complex_bubble_chart_part2.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (515.8296837723575, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (515.8296837723575, 408.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -202,7 +202,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="515.8296837723575" height="408.0">
             </rect>
           </clipPath>
@@ -668,6 +668,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/points/complex_bubble_chart_part2_dark.svg b/docs/images/samples/points/complex_bubble_chart_part2_dark.svg
index 6bb8374a6..90e6c2f96 100644
--- a/docs/images/samples/points/complex_bubble_chart_part2_dark.svg
+++ b/docs/images/samples/points/complex_bubble_chart_part2_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -293,7 +293,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (515.8296837723575, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (515.8296837723575, 408.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -324,7 +324,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="515.8296837723575" height="408.0">
             </rect>
           </clipPath>
@@ -668,6 +668,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/points/complex_bubble_chart_part3.svg b/docs/images/samples/points/complex_bubble_chart_part3.svg
index 504acfb28..590b616dd 100644
--- a/docs/images/samples/points/complex_bubble_chart_part3.svg
+++ b/docs/images/samples/points/complex_bubble_chart_part3.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (515.8296837723575, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (515.8296837723575, 408.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -202,7 +202,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="515.8296837723575" height="408.0">
             </rect>
           </clipPath>
@@ -666,6 +666,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/points/complex_bubble_chart_part3_dark.svg b/docs/images/samples/points/complex_bubble_chart_part3_dark.svg
index 2468ad6a7..b500b0232 100644
--- a/docs/images/samples/points/complex_bubble_chart_part3_dark.svg
+++ b/docs/images/samples/points/complex_bubble_chart_part3_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -291,7 +291,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (515.8296837723575, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (515.8296837723575, 408.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -322,7 +322,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="515.8296837723575" height="408.0">
             </rect>
           </clipPath>
@@ -666,6 +666,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/points/fixed_points.svg b/docs/images/samples/points/fixed_points.svg
index b25ea6c7f..b722b7ef3 100644
--- a/docs/images/samples/points/fixed_points.svg
+++ b/docs/images/samples/points/fixed_points.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (668.0193945445318, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (668.0193945445318, 424.0)]">
         <g transform="translate(9.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -198,7 +198,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="9.980605455468202" y="0.0" width="668.0193945445318" height="424.0">
             </rect>
           </clipPath>
@@ -374,6 +374,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/points/fixed_points_dark.svg b/docs/images/samples/points/fixed_points_dark.svg
index 2ca3486f1..de9802014 100644
--- a/docs/images/samples/points/fixed_points_dark.svg
+++ b/docs/images/samples/points/fixed_points_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -333,7 +333,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (668.0193945445318, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (668.0193945445318, 424.0)]">
         <g transform="translate(9.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -352,7 +352,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="9.980605455468202" y="0.0" width="668.0193945445318" height="424.0">
             </rect>
           </clipPath>
@@ -374,6 +374,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/points/functional_scatter_plot.svg b/docs/images/samples/points/functional_scatter_plot.svg
index 76b3f5a1a..b1f03797b 100644
--- a/docs/images/samples/points/functional_scatter_plot.svg
+++ b/docs/images/samples/points/functional_scatter_plot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
         <g transform="translate(31.015306675749617 0.0 ) ">
           <g>
             <g>
@@ -252,7 +252,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.015306675749617" y="0.0" width="646.9846933242504" height="424.0">
             </rect>
           </clipPath>
@@ -420,6 +420,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/points/functional_scatter_plot_dark.svg b/docs/images/samples/points/functional_scatter_plot_dark.svg
index 619022767..d85d317ca 100644
--- a/docs/images/samples/points/functional_scatter_plot_dark.svg
+++ b/docs/images/samples/points/functional_scatter_plot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
         <g transform="translate(31.015306675749617 0.0 ) ">
           <g>
             <g>
@@ -398,7 +398,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.015306675749617" y="0.0" width="646.9846933242504" height="424.0">
             </rect>
           </clipPath>
@@ -420,6 +420,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/points/points_gradient.svg b/docs/images/samples/points/points_gradient.svg
index bb36ab900..95d2b7d8e 100644
--- a/docs/images/samples/points/points_gradient.svg
+++ b/docs/images/samples/points/points_gradient.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (599.1066699949249, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (599.1066699949249, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -299,7 +299,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="599.1066699949249" height="424.0">
             </rect>
           </clipPath>
@@ -612,6 +612,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/points/points_gradient_dark.svg b/docs/images/samples/points/points_gradient_dark.svg
index 1fff22f4d..50ca0ba68 100644
--- a/docs/images/samples/points/points_gradient_dark.svg
+++ b/docs/images/samples/points/points_gradient_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -369,7 +369,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (599.1066699949249, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (599.1066699949249, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -481,7 +481,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="599.1066699949249" height="424.0">
             </rect>
           </clipPath>
@@ -612,6 +612,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/points/points_settings.svg b/docs/images/samples/points/points_settings.svg
index da245ad54..d3a4f31ab 100644
--- a/docs/images/samples/points/points_settings.svg
+++ b/docs/images/samples/points/points_settings.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -204,7 +204,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -360,6 +360,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/points/points_settings_dark.svg b/docs/images/samples/points/points_settings_dark.svg
index 4adf0e9b8..d74a7879c 100644
--- a/docs/images/samples/points/points_settings_dark.svg
+++ b/docs/images/samples/points/points_settings_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -309,7 +309,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -338,7 +338,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -360,6 +360,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/points/points_with_abLine.svg b/docs/images/samples/points/points_with_abLine.svg
index 6d759b583..a056e69a8 100644
--- a/docs/images/samples/points/points_with_abLine.svg
+++ b/docs/images/samples/points/points_with_abLine.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -202,13 +202,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -346,6 +346,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/points/points_with_abLine_dark.svg b/docs/images/samples/points/points_with_abLine_dark.svg
index 8b6ca0793..64a517cea 100644
--- a/docs/images/samples/points/points_with_abLine_dark.svg
+++ b/docs/images/samples/points/points_with_abLine_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -287,7 +287,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -318,13 +318,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -346,6 +346,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/points/points_with_color_by_category.svg b/docs/images/samples/points/points_with_color_by_category.svg
index b2867f1ac..8e5d7c0da 100644
--- a/docs/images/samples/points/points_with_color_by_category.svg
+++ b/docs/images/samples/points/points_with_color_by_category.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (576.0496782962234, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (576.0496782962234, 408.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -203,7 +203,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="576.0496782962234" height="408.0">
             </rect>
           </clipPath>
@@ -395,6 +395,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/points/points_with_color_by_category_dark.svg b/docs/images/samples/points/points_with_color_by_category_dark.svg
index 7dfcc9c66..5a5ced7c1 100644
--- a/docs/images/samples/points/points_with_color_by_category_dark.svg
+++ b/docs/images/samples/points/points_with_color_by_category_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 22.0 ) ">
@@ -291,7 +291,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (576.0496782962234, 408.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (576.0496782962234, 408.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -323,7 +323,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="576.0496782962234" height="408.0">
             </rect>
           </clipPath>
@@ -395,6 +395,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/ribbon/regression_confidence_band.svg b/docs/images/samples/ribbon/regression_confidence_band.svg
index 94a5daee0..11c4685bc 100644
--- a/docs/images/samples/ribbon/regression_confidence_band.svg
+++ b/docs/images/samples/ribbon/regression_confidence_band.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -199,13 +199,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -352,6 +352,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/ribbon/regression_confidence_band_dark.svg b/docs/images/samples/ribbon/regression_confidence_band_dark.svg
index 49479565b..22264cb74 100644
--- a/docs/images/samples/ribbon/regression_confidence_band_dark.svg
+++ b/docs/images/samples/ribbon/regression_confidence_band_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -298,7 +298,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.961210910936405, 0.0), (660.0387890890636, 424.0)]">
         <g transform="translate(17.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -324,13 +324,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="17.961210910936405" y="0.0" width="660.0387890890636" height="424.0">
             </rect>
           </clipPath>
@@ -352,6 +352,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/ribbon/ribbon_function_plot.svg b/docs/images/samples/ribbon/ribbon_function_plot.svg
index 4bb9fc3a0..636c760af 100644
--- a/docs/images/samples/ribbon/ribbon_function_plot.svg
+++ b/docs/images/samples/ribbon/ribbon_function_plot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
         <g transform="translate(31.015306675749617 0.0 ) ">
           <g>
             <g>
@@ -191,7 +191,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.015306675749617" y="0.0" width="646.9846933242504" height="424.0">
             </rect>
           </clipPath>
@@ -335,6 +335,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/ribbon/ribbon_function_plot_dark.svg b/docs/images/samples/ribbon/ribbon_function_plot_dark.svg
index 2cdc41128..545f8446c 100644
--- a/docs/images/samples/ribbon/ribbon_function_plot_dark.svg
+++ b/docs/images/samples/ribbon/ribbon_function_plot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -293,7 +293,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (31.015306675749617, 0.0), (646.9846933242504, 424.0)]">
         <g transform="translate(31.015306675749617 0.0 ) ">
           <g>
             <g>
@@ -313,7 +313,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.015306675749617" y="0.0" width="646.9846933242504" height="424.0">
             </rect>
           </clipPath>
@@ -335,6 +335,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/ribbon/ribbon_grouped.svg b/docs/images/samples/ribbon/ribbon_grouped.svg
index f10a036fe..b7af791de 100644
--- a/docs/images/samples/ribbon/ribbon_grouped.svg
+++ b/docs/images/samples/ribbon/ribbon_grouped.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (537.3421438682865, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (537.3421438682865, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -207,7 +207,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="537.3421438682865" height="424.0">
             </rect>
           </clipPath>
@@ -406,6 +406,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/ribbon/ribbon_grouped_dark.svg b/docs/images/samples/ribbon/ribbon_grouped_dark.svg
index 16dc60849..b637d71cf 100644
--- a/docs/images/samples/ribbon/ribbon_grouped_dark.svg
+++ b/docs/images/samples/ribbon/ribbon_grouped_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -303,7 +303,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (537.3421438682865, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (537.3421438682865, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -335,7 +335,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="537.3421438682865" height="424.0">
             </rect>
           </clipPath>
@@ -406,6 +406,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/ribbon/ribbon_settings.svg b/docs/images/samples/ribbon/ribbon_settings.svg
index 4afa78496..638c42d03 100644
--- a/docs/images/samples/ribbon/ribbon_settings.svg
+++ b/docs/images/samples/ribbon/ribbon_settings.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -177,7 +177,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -197,7 +197,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="424.0">
             </rect>
           </clipPath>
@@ -354,6 +354,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/ribbon/ribbon_settings_dark.svg b/docs/images/samples/ribbon/ribbon_settings_dark.svg
index 5420e3d4d..a96db6db6 100644
--- a/docs/images/samples/ribbon/ribbon_settings_dark.svg
+++ b/docs/images/samples/ribbon/ribbon_settings_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -312,7 +312,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.941816366404606, 0.0), (652.0581836335954, 424.0)]">
         <g transform="translate(25.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -332,7 +332,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="25.941816366404606" y="0.0" width="652.0581836335954" height="424.0">
             </rect>
           </clipPath>
@@ -354,6 +354,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/ribbon/ribbon_simple.svg b/docs/images/samples/ribbon/ribbon_simple.svg
index af08fc57d..49cdb5fda 100644
--- a/docs/images/samples/ribbon/ribbon_simple.svg
+++ b/docs/images/samples/ribbon/ribbon_simple.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -195,7 +195,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="654.9652987797186" height="424.0">
             </rect>
           </clipPath>
@@ -357,6 +357,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/ribbon/ribbon_simple_dark.svg b/docs/images/samples/ribbon/ribbon_simple_dark.svg
index aaa47186d..66d4ac855 100644
--- a/docs/images/samples/ribbon/ribbon_simple_dark.svg
+++ b/docs/images/samples/ribbon/ribbon_simple_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -315,7 +315,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -335,7 +335,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="654.9652987797186" height="424.0">
             </rect>
           </clipPath>
@@ -357,6 +357,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/ribbon/ribbon_with_line.svg b/docs/images/samples/ribbon/ribbon_with_line.svg
index 3f3eb603e..d7b74aa8c 100644
--- a/docs/images/samples/ribbon/ribbon_with_line.svg
+++ b/docs/images/samples/ribbon/ribbon_with_line.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -177,7 +177,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (46.97651758668602, 0.0), (631.023482413314, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (46.97651758668602, 0.0), (631.023482413314, 424.0)]">
         <g transform="translate(46.97651758668602 0.0 ) ">
           <g>
             <g>
@@ -203,13 +203,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="46.97651758668602" y="0.0" width="631.023482413314" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="46.97651758668602" y="0.0" width="631.023482413314" height="424.0">
             </rect>
           </clipPath>
@@ -370,6 +370,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/ribbon/ribbon_with_line_dark.svg b/docs/images/samples/ribbon/ribbon_with_line_dark.svg
index 4e56e0fc4..83a165aa2 100644
--- a/docs/images/samples/ribbon/ribbon_with_line_dark.svg
+++ b/docs/images/samples/ribbon/ribbon_with_line_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_3 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-text {
+#_sample_helper_static_id_prefix_3 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-title {
+#_sample_helper_static_id_prefix_3 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .tooltip-label {
+#_sample_helper_static_id_prefix_3 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -316,7 +316,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (46.97651758668602, 0.0), (631.023482413314, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (46.97651758668602, 0.0), (631.023482413314, 424.0)]">
         <g transform="translate(46.97651758668602 0.0 ) ">
           <g>
             <g>
@@ -342,13 +342,13 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="46.97651758668602" y="0.0" width="631.023482413314" height="424.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="46.97651758668602" y="0.0" width="631.023482413314" height="424.0">
             </rect>
           </clipPath>
@@ -370,6 +370,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx3">
+  <g id="_sample_helper_static_id_prefix_3">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/tiles/basic_heatmap.svg b/docs/images/samples/tiles/basic_heatmap.svg
index fdab55765..8b8557468 100644
--- a/docs/images/samples/tiles/basic_heatmap.svg
+++ b/docs/images/samples/tiles/basic_heatmap.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -155,7 +155,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (34.40018069752042, 0.0), (590.6483056638091, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (34.40018069752042, 0.0), (590.6483056638091, 424.0)]">
         <g transform="translate(34.40018069752042 0.0 ) ">
           <g>
             <g>
@@ -176,7 +176,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="34.40018069752042" y="0.0" width="590.6483056638091" height="424.0">
             </rect>
           </clipPath>
@@ -361,6 +361,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/tiles/basic_heatmap_dark.svg b/docs/images/samples/tiles/basic_heatmap_dark.svg
index e29d488bc..736013a43 100644
--- a/docs/images/samples/tiles/basic_heatmap_dark.svg
+++ b/docs/images/samples/tiles/basic_heatmap_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -209,7 +209,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (34.40018069752042, 0.0), (590.6483056638091, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (34.40018069752042, 0.0), (590.6483056638091, 424.0)]">
         <g transform="translate(34.40018069752042 0.0 ) ">
           <g>
             <g>
@@ -230,7 +230,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="34.40018069752042" y="0.0" width="590.6483056638091" height="424.0">
             </rect>
           </clipPath>
@@ -361,6 +361,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/tiles/basic_tile_plot.svg b/docs/images/samples/tiles/basic_tile_plot.svg
index 0381608b4..79f625f39 100644
--- a/docs/images/samples/tiles/basic_tile_plot.svg
+++ b/docs/images/samples/tiles/basic_tile_plot.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -185,7 +185,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="654.9652987797186" height="424.0">
             </rect>
           </clipPath>
@@ -315,6 +315,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/tiles/basic_tile_plot_dark.svg b/docs/images/samples/tiles/basic_tile_plot_dark.svg
index 752314acb..f875fa244 100644
--- a/docs/images/samples/tiles/basic_tile_plot_dark.svg
+++ b/docs/images/samples/tiles/basic_tile_plot_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -279,7 +279,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (23.034701220281416, 0.0), (654.9652987797186, 424.0)]">
         <g transform="translate(23.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -293,7 +293,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="23.034701220281416" y="0.0" width="654.9652987797186" height="424.0">
             </rect>
           </clipPath>
@@ -315,6 +315,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/tiles/fixed_tile.svg b/docs/images/samples/tiles/fixed_tile.svg
index 845c7bd51..af0948318 100644
--- a/docs/images/samples/tiles/fixed_tile.svg
+++ b/docs/images/samples/tiles/fixed_tile.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (668.0193945445318, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (668.0193945445318, 424.0)]">
         <g transform="translate(9.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -189,7 +189,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="9.980605455468202" y="0.0" width="668.0193945445318" height="424.0">
             </rect>
           </clipPath>
@@ -344,6 +344,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/tiles/fixed_tile_dark.svg b/docs/images/samples/tiles/fixed_tile_dark.svg
index e208e5974..c3abbfecd 100644
--- a/docs/images/samples/tiles/fixed_tile_dark.svg
+++ b/docs/images/samples/tiles/fixed_tile_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -306,7 +306,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (668.0193945445318, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (9.980605455468202, 0.0), (668.0193945445318, 424.0)]">
         <g transform="translate(9.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -322,7 +322,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="9.980605455468202" y="0.0" width="668.0193945445318" height="424.0">
             </rect>
           </clipPath>
@@ -344,6 +344,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/tiles/tiles_color_categories.svg b/docs/images/samples/tiles/tiles_color_categories.svg
index e912cfed9..f662e75cb 100644
--- a/docs/images/samples/tiles/tiles_color_categories.svg
+++ b/docs/images/samples/tiles/tiles_color_categories.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -157,7 +157,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (33.92242182187281, 0.0), (591.3899872574912, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (33.92242182187281, 0.0), (591.3899872574912, 424.0)]">
         <g transform="translate(33.92242182187281 0.0 ) ">
           <g>
             <g>
@@ -181,7 +181,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="33.92242182187281" y="0.0" width="591.3899872574912" height="424.0">
             </rect>
           </clipPath>
@@ -324,6 +324,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/tiles/tiles_color_categories_dark.svg b/docs/images/samples/tiles/tiles_color_categories_dark.svg
index 457e25b2a..2e31638b0 100644
--- a/docs/images/samples/tiles/tiles_color_categories_dark.svg
+++ b/docs/images/samples/tiles/tiles_color_categories_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -220,7 +220,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (33.92242182187281, 0.0), (591.3899872574912, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (33.92242182187281, 0.0), (591.3899872574912, 424.0)]">
         <g transform="translate(33.92242182187281 0.0 ) ">
           <g>
             <g>
@@ -244,7 +244,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="33.92242182187281" y="0.0" width="591.3899872574912" height="424.0">
             </rect>
           </clipPath>
@@ -324,6 +324,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/tiles/tiles_gradient.svg b/docs/images/samples/tiles/tiles_gradient.svg
index 4c921ba47..962f10b01 100644
--- a/docs/images/samples/tiles/tiles_gradient.svg
+++ b/docs/images/samples/tiles/tiles_gradient.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -157,7 +157,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (33.92242182187281, 0.0), (586.0525742301116, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (33.92242182187281, 0.0), (586.0525742301116, 424.0)]">
         <g transform="translate(33.92242182187281 0.0 ) ">
           <g>
             <g>
@@ -181,7 +181,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="33.92242182187281" y="0.0" width="586.0525742301116" height="424.0">
             </rect>
           </clipPath>
@@ -357,6 +357,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/tiles/tiles_gradient_dark.svg b/docs/images/samples/tiles/tiles_gradient_dark.svg
index 18fd7d5ec..56c67680f 100644
--- a/docs/images/samples/tiles/tiles_gradient_dark.svg
+++ b/docs/images/samples/tiles/tiles_gradient_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -220,7 +220,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (33.92242182187281, 0.0), (586.0525742301116, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (33.92242182187281, 0.0), (586.0525742301116, 424.0)]">
         <g transform="translate(33.92242182187281 0.0 ) ">
           <g>
             <g>
@@ -244,7 +244,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="33.92242182187281" y="0.0" width="586.0525742301116" height="424.0">
             </rect>
           </clipPath>
@@ -357,6 +357,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/tiles/tiles_ktnb_logo.svg b/docs/images/samples/tiles/tiles_ktnb_logo.svg
index f82fd7df0..98fe7681a 100644
--- a/docs/images/samples/tiles/tiles_ktnb_logo.svg
+++ b/docs/images/samples/tiles/tiles_ktnb_logo.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(6.0 6.0 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (693.0, 458.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (693.0, 458.0)]">
         <g transform="">
           <g>
             <g>
@@ -1640,7 +1640,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="693.0" height="458.0">
             </rect>
           </clipPath>
@@ -1652,6 +1652,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/tiles/tiles_ktnb_logo_dark.svg b/docs/images/samples/tiles/tiles_ktnb_logo_dark.svg
index 8ec47811e..c5b06fd73 100644
--- a/docs/images/samples/tiles/tiles_ktnb_logo_dark.svg
+++ b/docs/images/samples/tiles/tiles_ktnb_logo_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(6.0 6.0 ) ">
@@ -147,7 +147,7 @@ font-size: 13.0px;
         <g transform="">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (693.0, 458.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (693.0, 458.0)]">
         <g transform="">
           <g>
             <g>
@@ -1640,7 +1640,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="0.0" y="0.0" width="693.0" height="458.0">
             </rect>
           </clipPath>
@@ -1652,6 +1652,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/tiles/tiles_settings.svg b/docs/images/samples/tiles/tiles_settings.svg
index 81ef4985e..4d7a9d33c 100644
--- a/docs/images/samples/tiles/tiles_settings.svg
+++ b/docs/images/samples/tiles/tiles_settings.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #ffffff;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #474747;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -155,7 +155,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (65.10410366084425, 0.0), (552.9483179171037, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (65.10410366084425, 0.0), (552.9483179171037, 424.0)]">
         <g transform="translate(65.10410366084425 0.0 ) ">
           <g>
             <g>
@@ -176,7 +176,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="65.10410366084425" y="0.0" width="552.9483179171037" height="424.0">
             </rect>
           </clipPath>
@@ -370,6 +370,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/images/samples/tiles/tiles_settings_dark.svg b/docs/images/samples/tiles/tiles_settings_dark.svg
index 22cabee9d..0cb086eda 100644
--- a/docs/images/samples/tiles/tiles_settings_dark.svg
+++ b/docs/images/samples/tiles/tiles_settings_dark.svg
@@ -10,117 +10,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-x {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-x {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_2 .axis-tooltip-text-y {
 fill: #303030;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-text {
+#_sample_helper_static_id_prefix_2 .tooltip-text {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-title {
+#_sample_helper_static_id_prefix_2 .tooltip-title {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx2 .tooltip-label {
+#_sample_helper_static_id_prefix_2 .tooltip-label {
 fill: #bbbbbb;
 font-weight: bold;
    font-style: normal;font-family: sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z">
     </path>
     <g transform="translate(21.0 6.0 ) ">
@@ -209,7 +209,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (65.10410366084425, 0.0), (552.9483179171037, 424.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (65.10410366084425, 0.0), (552.9483179171037, 424.0)]">
         <g transform="translate(65.10410366084425 0.0 ) ">
           <g>
             <g>
@@ -230,7 +230,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="65.10410366084425" y="0.0" width="552.9483179171037" height="424.0">
             </rect>
           </clipPath>
@@ -370,6 +370,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 </svg>
\ No newline at end of file
diff --git a/docs/kd.tree b/docs/kd.tree
index e04717527..e75358127 100644
--- a/docs/kd.tree
+++ b/docs/kd.tree
@@ -251,4 +251,5 @@
         </toc-element>
     </toc-element>
     <toc-element topic="FAQ.md"/>
+    <toc-element topic="_shadow_resources.md" hidden="true"/>
 </instance-profile>
\ No newline at end of file
diff --git a/docs/topics/_shadow_resources.md b/docs/topics/_shadow_resources.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/docs/writerside.cfg b/docs/writerside.cfg
index 1360d2b2e..43671e391 100644
--- a/docs/writerside.cfg
+++ b/docs/writerside.cfg
@@ -10,4 +10,5 @@
         <default-property element-name="chapter" property-name="show-structure-depth" value="2"/>
         <default-property element-name="toc-element" property-name="show-structure-depth" value="2"/>
     </settings>
+
 </ihp>
\ No newline at end of file
diff --git a/gradle.properties b/gradle.properties
index 7bdc361fe..bce241d4d 100644
--- a/gradle.properties
+++ b/gradle.properties
@@ -1,4 +1,4 @@
-version=0.8.1
+version=0.8.2
 kotlin.code.style=official
 kotlin.jupyter.add.scanner=true
 # Gradle
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index 8627a4f37..3e040daef 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -4,11 +4,11 @@ kotlin = "2.2.20"
 dokka = "2.0.0"
 korro = "0.1.6"
 nexus = "2.0.0"
-jupyterApi = "0.15.0-587"
+jupyterApi = "0.15.0-629"
 ksp = "2.2.20-2.0.2"
 
 # libraries version
-dataframe = "1.0.0-Beta3"
+dataframe = "1.0.0-dev-8572"
 serialization = "1.9.0"
 datetime = "0.7.1-0.6.x-compat"
 html = "0.11.0"
diff --git a/kandy-api/src/main/kotlin/org/jetbrains/kotlinx/kandy/dsl/internal/dataframe/DatasetBuilderImpl.kt b/kandy-api/src/main/kotlin/org/jetbrains/kotlinx/kandy/dsl/internal/dataframe/DatasetBuilderImpl.kt
index 365e227b7..6fc4b543a 100644
--- a/kandy-api/src/main/kotlin/org/jetbrains/kotlinx/kandy/dsl/internal/dataframe/DatasetBuilderImpl.kt
+++ b/kandy-api/src/main/kotlin/org/jetbrains/kotlinx/kandy/dsl/internal/dataframe/DatasetBuilderImpl.kt
@@ -60,7 +60,7 @@ internal abstract class DatasetBuilderImpl(
                 addColumn(column.rename(column.name() + "*"))
             }
         } else {
-            buffer = buffer.add(column)
+            buffer = buffer.addAll(column)
             column.name()
         }
     }
diff --git a/kandy-geo/build.gradle.kts b/kandy-geo/build.gradle.kts
index b735e2460..46bdb5616 100644
--- a/kandy-geo/build.gradle.kts
+++ b/kandy-geo/build.gradle.kts
@@ -35,7 +35,7 @@ dependencies {
 
     implementation(libs.jai.core)
 
-    testImplementation(project(":samples-utils"))
+    testImplementation(project(":kandy-samples-utils"))
     testImplementation(kotlin("test"))
 }
 
diff --git a/kandy-geo/src/main/kotlin/org/jetbrains/kotlinx/kandy/letsplot/geo/dsl/GeoDataBuilder.kt b/kandy-geo/src/main/kotlin/org/jetbrains/kotlinx/kandy/letsplot/geo/dsl/GeoDataBuilder.kt
index b1f03ac3e..141dc041b 100644
--- a/kandy-geo/src/main/kotlin/org/jetbrains/kotlinx/kandy/letsplot/geo/dsl/GeoDataBuilder.kt
+++ b/kandy-geo/src/main/kotlin/org/jetbrains/kotlinx/kandy/letsplot/geo/dsl/GeoDataBuilder.kt
@@ -4,6 +4,7 @@ package org.jetbrains.kotlinx.kandy.letsplot.geo.dsl
 
 import org.jetbrains.kotlinx.dataframe.DataFrame
 import org.jetbrains.kotlinx.dataframe.api.add
+import org.jetbrains.kotlinx.dataframe.api.addAll
 import org.jetbrains.kotlinx.dataframe.geo.GeoDataFrame
 import org.jetbrains.kotlinx.dataframe.geo.WithGeometry
 import org.jetbrains.kotlinx.dataframe.geo.geometry
@@ -21,7 +22,7 @@ internal class GeoDataBuilder(
     @Suppress("UNCHECKED_CAST")
     override fun build(): TableData {
         if (!buffer.containsColumn("geometry")) {
-            buffer = buffer.add(baseDataFrame.geometry)
+            buffer = buffer.addAll(baseDataFrame.geometry)
         }
         return GeoData(GeoDataFrame(buffer as DataFrame<WithGeometry>, crs))
     }
diff --git a/kandy-geo/src/main/kotlin/org/jetbrains/kotlinx/kandy/letsplot/geo/layers/geoLayer.kt b/kandy-geo/src/main/kotlin/org/jetbrains/kotlinx/kandy/letsplot/geo/layers/geoLayer.kt
index 5c84235b7..755f42c5a 100644
--- a/kandy-geo/src/main/kotlin/org/jetbrains/kotlinx/kandy/letsplot/geo/layers/geoLayer.kt
+++ b/kandy-geo/src/main/kotlin/org/jetbrains/kotlinx/kandy/letsplot/geo/layers/geoLayer.kt
@@ -4,6 +4,7 @@ package org.jetbrains.kotlinx.kandy.letsplot.geo.layers
 
 import org.jetbrains.kotlinx.dataframe.DataColumn
 import org.jetbrains.kotlinx.dataframe.api.add
+import org.jetbrains.kotlinx.dataframe.api.addAll
 import org.jetbrains.kotlinx.dataframe.api.dataFrameOf
 import org.jetbrains.kotlinx.dataframe.api.named
 import org.jetbrains.kotlinx.dataframe.geo.toGeo
@@ -36,7 +37,7 @@ internal fun <T> LayerCreatorScope.geoLayer(
     } else {
         // TODO(https://github.com/Kotlin/kandy/issues/456)
         // add geometry column otherwise
-        (datasetBuilder as DatasetBuilderImpl).baseDataFrame.add(geometryColumn).toGeo()
+        (datasetBuilder as DatasetBuilderImpl).baseDataFrame.addAll(geometryColumn).toGeo()
     }
     plotBuilder.withData(geoDataFrame) {
         layerFun(builder)
diff --git a/kandy-geo/src/test/kotlin/org/jetbrains/kotlinx/kandy/geo/samples/gallery/geo.kt b/kandy-geo/src/test/kotlin/org/jetbrains/kotlinx/kandy/geo/samples/gallery/geo.kt
index 6ea850ccf..650c47ec4 100644
--- a/kandy-geo/src/test/kotlin/org/jetbrains/kotlinx/kandy/geo/samples/gallery/geo.kt
+++ b/kandy-geo/src/test/kotlin/org/jetbrains/kotlinx/kandy/geo/samples/gallery/geo.kt
@@ -35,20 +35,20 @@ class Geo : SampleHelper("geo") {
     fun usa_simple_poly_json() {
         // SampleStart
         val usaStates =
-            GeoDataFrame.readGeoJson("https://raw.githubusercontent.com/AndreiKingsley/datasets/refs/heads/main/USA.json")
+            GeoDataFrame.readGeoJson("https://raw.githubusercontent.com/AndrewKis/datasets/refs/heads/main/USA.json")
 
         usaStates.plot {
             geoPolygon()
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
     fun germany_map_settings_shapefile() {
         // SampleStart
         val worldStates =
-            GeoDataFrame.readShapefile("https://github.com/AndreiKingsley/datasets/raw/refs/heads/main/ne_10m_admin_1_states_provinces/ne_10m_admin_1_states_provinces.shp")
+            GeoDataFrame.readShapefile("https://github.com/AndrewKis/datasets/raw/refs/heads/main/ne_10m_admin_1_states_provinces/ne_10m_admin_1_states_provinces.shp")
 
         val germanStates = worldStates.modify {
             filter { "admin"<String>() == "Germany" }//SampleEnd
@@ -70,14 +70,14 @@ class Geo : SampleHelper("geo") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
     fun germany_map_categories() {
         // SampleStart
         val worldStates =
-            GeoDataFrame.readShapefile("https://github.com/AndreiKingsley/datasets/raw/refs/heads/main/ne_10m_admin_1_states_provinces/ne_10m_admin_1_states_provinces.shp")
+            GeoDataFrame.readShapefile("https://github.com/AndrewKis/datasets/raw/refs/heads/main/ne_10m_admin_1_states_provinces/ne_10m_admin_1_states_provinces.shp")
 
         val germanStates = worldStates.modify {
             filter { "admin"<String>() == "Germany" }//SampleEnd
@@ -105,7 +105,7 @@ class Geo : SampleHelper("geo") {
             }
         }
             // SampleEnd
-            .saveSample(savePreview = true)
+            .savePlotSVGSample(savePreview = true)
     }
 
     @Test
@@ -129,7 +129,7 @@ class Geo : SampleHelper("geo") {
             geoMap()
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -178,14 +178,14 @@ class Geo : SampleHelper("geo") {
             }
         }
             // SampleEnd
-            .saveSample(savePreview = true)
+            .savePlotSVGSample(savePreview = true)
     }
 
     @Test
     fun usa_conus_albers() {
         // SampleStart
         val usaStates =
-            GeoDataFrame.readGeoJson("https://raw.githubusercontent.com/AndreiKingsley/datasets/refs/heads/main/USA.json")
+            GeoDataFrame.readGeoJson("https://raw.githubusercontent.com/AndrewKis/datasets/refs/heads/main/USA.json")
 
         val usaAlbers = usaStates
             .modify {
@@ -199,7 +199,7 @@ class Geo : SampleHelper("geo") {
             layout.title = "US With CONUS Albers Projection"
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -240,6 +240,6 @@ class Geo : SampleHelper("geo") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 }
diff --git a/kandy-geo/src/test/kotlin/org/jetbrains/kotlinx/kandy/geo/samples/guides/GeoGuide.kt b/kandy-geo/src/test/kotlin/org/jetbrains/kotlinx/kandy/geo/samples/guides/GeoGuide.kt
index 5ad0fe129..38a4dca16 100644
--- a/kandy-geo/src/test/kotlin/org/jetbrains/kotlinx/kandy/geo/samples/guides/GeoGuide.kt
+++ b/kandy-geo/src/test/kotlin/org/jetbrains/kotlinx/kandy/geo/samples/guides/GeoGuide.kt
@@ -160,7 +160,7 @@ class GeoGuide : SampleHelper("geoGuide", "guides") {
     fun usaStatesReadGeoJson() {
         // SampleStart
         val usaStates =
-            GeoDataFrame.readGeoJson("https://raw.githubusercontent.com/AndreiKingsley/datasets/refs/heads/main/USA.json")
+            GeoDataFrame.readGeoJson("https://raw.githubusercontent.com/AndrewKis/datasets/refs/heads/main/USA.json")
         // SampleEnd
         assertNotNull(usaStates)
     }
@@ -171,6 +171,7 @@ class GeoGuide : SampleHelper("geoGuide", "guides") {
             // SampleStart
             usaStates.df
         // SampleEnd
+                //   .saveDfHtmlSample()
         assertNotNull(usaStatesDf)
     }
 
@@ -205,7 +206,7 @@ class GeoGuide : SampleHelper("geoGuide", "guides") {
     fun worldCitiesReadShapefile() {
         // SampleStart
         val worldCities =
-            GeoDataFrame.readShapefile("https://github.com/AndreiKingsley/datasets/raw/refs/heads/main/ne_10m_populated_places_simple/ne_10m_populated_places_simple.shp")
+            GeoDataFrame.readShapefile("https://github.com/AndrewKis/datasets/raw/refs/heads/main/ne_10m_populated_places_simple/ne_10m_populated_places_simple.shp")
         // SampleEnd
         assertNotNull(worldCities)
     }
@@ -248,7 +249,7 @@ class GeoGuide : SampleHelper("geoGuide", "guides") {
             geoPolygon()
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -264,7 +265,7 @@ class GeoGuide : SampleHelper("geoGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -275,7 +276,7 @@ class GeoGuide : SampleHelper("geoGuide", "guides") {
             coordinatesTransformation = CoordinatesTransformation.mercator()
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -287,7 +288,7 @@ class GeoGuide : SampleHelper("geoGuide", "guides") {
             geoMap()
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -299,7 +300,7 @@ class GeoGuide : SampleHelper("geoGuide", "guides") {
             y.axis.limits = 23..50
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -321,7 +322,7 @@ class GeoGuide : SampleHelper("geoGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     // TODO Need Korro import support.
@@ -347,7 +348,7 @@ class GeoGuide : SampleHelper("geoGuide", "guides") {
             geoMap(usaPolygon)
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -386,7 +387,7 @@ class GeoGuide : SampleHelper("geoGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     private val DataRow<*>.name: String
@@ -404,7 +405,7 @@ class GeoGuide : SampleHelper("geoGuide", "guides") {
 
         usa48.plot { geoMap() }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -424,7 +425,7 @@ class GeoGuide : SampleHelper("geoGuide", "guides") {
 
         usaAdjusted.plot { geoMap() }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -440,7 +441,7 @@ class GeoGuide : SampleHelper("geoGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -487,7 +488,7 @@ class GeoGuide : SampleHelper("geoGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -510,12 +511,13 @@ class GeoGuide : SampleHelper("geoGuide", "guides") {
             geoMap()
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     // TODO Need Korro import support.
     // Manual adding for now.
     @Test
+    @Ignore
     fun greatCircleCalculationFunction() {
         // SampleStart
         /* import required packages
@@ -598,7 +600,7 @@ class GeoGuide : SampleHelper("geoGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -628,7 +630,7 @@ class GeoGuide : SampleHelper("geoGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -639,7 +641,7 @@ class GeoGuide : SampleHelper("geoGuide", "guides") {
             geoRectangles()
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -654,7 +656,7 @@ class GeoGuide : SampleHelper("geoGuide", "guides") {
         // SampleStart
         GeoDataFrame.readGeoJson("usa_cities.geojson").plot { geoPoints() }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -685,7 +687,7 @@ class GeoGuide : SampleHelper("geoGuide", "guides") {
         // SampleStart
         GeoDataFrame.readShapefile("usa_48/usa_48.shp").plot { geoMap() }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     companion object {
diff --git a/kandy-lets-plot/build.gradle.kts b/kandy-lets-plot/build.gradle.kts
index 539a5e934..b381fea6c 100644
--- a/kandy-lets-plot/build.gradle.kts
+++ b/kandy-lets-plot/build.gradle.kts
@@ -24,9 +24,12 @@ dependencies {
 
     testImplementation(libs.kotlin.test)
     testImplementation(libs.mockk)
-    testImplementation(libs.kotlinx.statistics)
+    testImplementation(libs.kotlinx.statistics) {
+        exclude("org.jetbrains.kotlinx", "kandy")
+        exclude("org.jetbrains.kotlinx", "dataframe")
+    }
+    testImplementation(project(":kandy-samples-utils"))
     testImplementation(libs.kotlinx.dataframe.jupyter)
-    testImplementation(project(":samples-utils"))
 }
 
 tasks.test {
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/area.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/area.kt
index f1ea5a74b..c4977fe7c 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/area.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/area.kt
@@ -40,7 +40,7 @@ class Area : SampleHelper("area") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -86,7 +86,7 @@ class Area : SampleHelper("area") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -146,7 +146,7 @@ class Area : SampleHelper("area") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -205,7 +205,7 @@ class Area : SampleHelper("area") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -261,7 +261,7 @@ class Area : SampleHelper("area") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -320,7 +320,7 @@ class Area : SampleHelper("area") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -369,7 +369,7 @@ class Area : SampleHelper("area") {
             layout.size = 1000 to 450
         }
             // SampleEnd
-            .saveSample(true)
+            .savePlotSVGSample(true)
     }
 
     @Test
@@ -441,7 +441,7 @@ class Area : SampleHelper("area") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -468,7 +468,7 @@ class Area : SampleHelper("area") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -487,6 +487,6 @@ class Area : SampleHelper("area") {
             // SampleStart
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 }
\ No newline at end of file
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/bars.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/bars.kt
index f46d9d939..e8982ab5f 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/bars.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/bars.kt
@@ -38,7 +38,7 @@ class Bars : SampleHelper("bars") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -85,7 +85,7 @@ class Bars : SampleHelper("bars") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -139,7 +139,7 @@ class Bars : SampleHelper("bars") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -184,7 +184,7 @@ class Bars : SampleHelper("bars") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -205,7 +205,7 @@ class Bars : SampleHelper("bars") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -251,7 +251,7 @@ class Bars : SampleHelper("bars") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -303,7 +303,7 @@ class Bars : SampleHelper("bars") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -364,7 +364,7 @@ class Bars : SampleHelper("bars") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -414,7 +414,7 @@ class Bars : SampleHelper("bars") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -439,7 +439,7 @@ class Bars : SampleHelper("bars") {
             histogram(sample)
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/boxplot.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/boxplot.kt
index 8f81bfafa..00e5c4de0 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/boxplot.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/boxplot.kt
@@ -46,7 +46,7 @@ class Boxplot : SampleHelper("boxplot") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -111,7 +111,7 @@ class Boxplot : SampleHelper("boxplot") {
             coordinatesTransformation = CoordinatesTransformation.cartesianFlipped()
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -135,6 +135,6 @@ class Boxplot : SampleHelper("boxplot") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 }
\ No newline at end of file
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/candlestick.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/candlestick.kt
index a2449497f..a8442a0f3 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/candlestick.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/candlestick.kt
@@ -29,7 +29,7 @@ class Candlestick : SampleHelper("candlestick") {
             candlestick("month", "open", "high", "low", "close")
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -75,7 +75,7 @@ class Candlestick : SampleHelper("candlestick") {
             x.axis.name = "Date"
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -136,7 +136,7 @@ class Candlestick : SampleHelper("candlestick") {
             layout.size = 750 to 400
         }
             // SampleEnd
-            .saveSample(savePreview = true)
+            .savePlotSVGSample(savePreview = true)
     }
 
     @Test
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/countPlot.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/countPlot.kt
index d14a9d9bc..f4cbb447f 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/countPlot.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/countPlot.kt
@@ -6,9 +6,7 @@ import org.jetbrains.kotlinx.kandy.dsl.plot
 import org.jetbrains.kotlinx.kandy.letsplot.feature.layout
 import org.jetbrains.kotlinx.kandy.letsplot.layers.barsH
 import org.jetbrains.kotlinx.kandy.letsplot.scales.guide.LegendType
-import org.jetbrains.kotlinx.kandy.letsplot.x
 import org.jetbrains.kotlinx.kandy.util.color.Color
-import org.jetbrains.kotlinx.kandy.util.context.invoke
 import org.jetbrains.kotlinx.statistics.kandy.layers.countPlot
 import org.jetbrains.kotlinx.statistics.kandy.stattransform.statCount
 import kotlin.test.Test
@@ -36,7 +34,7 @@ class CountPlot : SampleHelper("countPlot") {
             countPlot("categories")
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -87,7 +85,7 @@ class CountPlot : SampleHelper("countPlot") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -153,7 +151,7 @@ class CountPlot : SampleHelper("countPlot") {
             countPlot("year")
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -235,7 +233,7 @@ class CountPlot : SampleHelper("countPlot") {
             layout.title = "Distribution of transport used by students"
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/densityPlot.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/densityPlot.kt
index 295cbc3a1..6d8654b5d 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/densityPlot.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/densityPlot.kt
@@ -5,8 +5,6 @@ import org.jetbrains.kotlinx.dataframe.api.*
 import org.jetbrains.kotlinx.dataframe.io.readCsv
 import org.jetbrains.kotlinx.kandy.dsl.plot
 import org.jetbrains.kotlinx.kandy.letsplot.feature.layout
-import org.jetbrains.kotlinx.kandy.letsplot.x
-import org.jetbrains.kotlinx.kandy.letsplot.y
 import org.jetbrains.kotlinx.kandy.util.color.Color
 import org.jetbrains.kotlinx.kandy.util.context.invoke
 import org.jetbrains.kotlinx.statistics.kandy.layers.densityPlot
@@ -33,7 +31,7 @@ class DensityPlot : SampleHelper("densityPlot") {
             // SampleStart
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -83,7 +81,7 @@ class DensityPlot : SampleHelper("densityPlot") {
             layout.title = "Flight length experiment"
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -165,7 +163,7 @@ class DensityPlot : SampleHelper("densityPlot") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -243,7 +241,7 @@ class DensityPlot : SampleHelper("densityPlot") {
             layout.title = "Titanic passengers age distribution"
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
 }
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/errorBars.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/errorBars.kt
index 97974a672..85839d804 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/errorBars.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/errorBars.kt
@@ -33,7 +33,7 @@ class ErrorBars : SampleHelper("errorBars") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -74,7 +74,7 @@ class ErrorBars : SampleHelper("errorBars") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -126,7 +126,7 @@ class ErrorBars : SampleHelper("errorBars") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -170,7 +170,7 @@ class ErrorBars : SampleHelper("errorBars") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -213,7 +213,7 @@ class ErrorBars : SampleHelper("errorBars") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -237,7 +237,7 @@ class ErrorBars : SampleHelper("errorBars") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -291,6 +291,6 @@ class ErrorBars : SampleHelper("errorBars") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 }
\ No newline at end of file
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/algebraicCurve.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/algebraicCurve.kt
index 099b36869..efc0d1cb0 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/algebraicCurve.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/algebraicCurve.kt
@@ -1,5 +1,6 @@
 package org.jetbrains.kotlinx.kandy.letsplot.samples.guides
 
+import org.jetbrains.kotlinx.dataframe.api.toDataFrame
 import org.jetbrains.kotlinx.kandy.dsl.continuous
 import org.jetbrains.kotlinx.kandy.dsl.invoke
 import org.jetbrains.kotlinx.kandy.dsl.plot
@@ -109,7 +110,7 @@ class AlgebraicCurve : SampleHelper("geoms", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
 
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/anscombesQuartet.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/anscombesQuartet.kt
index fac1baf2c..26f9da36c 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/anscombesQuartet.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/anscombesQuartet.kt
@@ -73,6 +73,6 @@ class AnscombesQuartet : SampleHelper("multiplot", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 }
\ No newline at end of file
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/boxplot.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/boxplot.kt
index 690fc851c..3a403b2b2 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/boxplot.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/boxplot.kt
@@ -19,7 +19,6 @@ import org.jetbrains.kotlinx.kandy.letsplot.layers.*
 import org.jetbrains.kotlinx.kandy.letsplot.multiplot.plotGrid
 import org.jetbrains.kotlinx.kandy.letsplot.samples.SampleHelper
 import org.jetbrains.kotlinx.kandy.letsplot.settings.Symbol
-import org.jetbrains.kotlinx.kandy.letsplot.x
 import org.jetbrains.kotlinx.kandy.util.color.Color
 import org.jetbrains.kotlinx.statistics.kandy.layers.boxplot
 import org.jetbrains.kotlinx.statistics.kandy.statplots.boxplot
@@ -365,7 +364,7 @@ class Boxplot : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -383,7 +382,7 @@ class Boxplot : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -393,7 +392,7 @@ class Boxplot : SampleHelper("stat", "guides") {
             boxplot(`class`, hwy)
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -411,7 +410,7 @@ class Boxplot : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -420,7 +419,7 @@ class Boxplot : SampleHelper("stat", "guides") {
         groupedDF.boxplot("class", "hwy")
             // SampleEnd
             .toPlot()
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -442,7 +441,7 @@ class Boxplot : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -454,6 +453,6 @@ class Boxplot : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 }
\ No newline at end of file
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/candlestick.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/candlestick.kt
index ad07772e9..8027b19f6 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/candlestick.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/candlestick.kt
@@ -12,7 +12,6 @@ import org.jetbrains.kotlinx.kandy.letsplot.layers.errorBars
 import org.jetbrains.kotlinx.kandy.letsplot.multiplot.plotGrid
 import org.jetbrains.kotlinx.kandy.letsplot.samples.SampleHelper
 import org.jetbrains.kotlinx.kandy.letsplot.scales.guide.LegendType
-import org.jetbrains.kotlinx.kandy.letsplot.y
 import org.jetbrains.kotlinx.kandy.util.color.Color
 import org.jetbrains.kotlinx.kandy.util.context.invoke
 import org.jetbrains.kotlinx.statistics.kandy.layers.candlestick
@@ -89,7 +88,7 @@ class Candlestick : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -126,7 +125,7 @@ class Candlestick : SampleHelper("stat", "guides") {
         }
         statCandlestickBoxesPlot
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
 
@@ -140,7 +139,7 @@ class Candlestick : SampleHelper("stat", "guides") {
         }
         candlestickPlot
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -180,7 +179,7 @@ class Candlestick : SampleHelper("stat", "guides") {
         // SampleStart
         plotGrid(listOf(statCandlestickBoxesPlot, candlestickPlot))
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -200,7 +199,7 @@ class Candlestick : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -221,7 +220,7 @@ class Candlestick : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -230,7 +229,7 @@ class Candlestick : SampleHelper("stat", "guides") {
         candlestick(xList, openList, highList, lowList, closeList)
             // SampleEnd
             .toPlot()
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -281,6 +280,6 @@ class Candlestick : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 }
\ No newline at end of file
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/countPlot.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/countPlot.kt
index 521837bbf..8d57a7867 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/countPlot.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/countPlot.kt
@@ -79,7 +79,7 @@ class CountPlot : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -96,7 +96,7 @@ class CountPlot : SampleHelper("stat", "guides") {
         }
         statCountAndBarsPlt
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -108,7 +108,7 @@ class CountPlot : SampleHelper("stat", "guides") {
         }
         countPlt
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -129,7 +129,7 @@ class CountPlot : SampleHelper("stat", "guides") {
         // SampleStart
         plotGrid(listOf(statCountAndBarsPlt, countPlt))
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -145,7 +145,7 @@ class CountPlot : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -164,7 +164,7 @@ class CountPlot : SampleHelper("stat", "guides") {
             x.axis.name = "Car class"
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -173,7 +173,7 @@ class CountPlot : SampleHelper("stat", "guides") {
         countPlot(listOf("A", "A", "A", "B", "B", "C", "B", "B"))
             // SampleEnd
             .toPlot()
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -182,7 +182,7 @@ class CountPlot : SampleHelper("stat", "guides") {
         df.countPlot("class")
             // SampleEnd
             .toPlot()
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -196,7 +196,7 @@ class CountPlot : SampleHelper("stat", "guides") {
         }
             // SampleEnd
             .toPlot()
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -218,7 +218,7 @@ class CountPlot : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     // Grouped data
@@ -254,7 +254,7 @@ class CountPlot : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -270,7 +270,7 @@ class CountPlot : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -280,7 +280,7 @@ class CountPlot : SampleHelper("stat", "guides") {
             countPlot("class")
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -298,7 +298,7 @@ class CountPlot : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -307,7 +307,7 @@ class CountPlot : SampleHelper("stat", "guides") {
         groupedDF.countPlot("class")
             // SampleEnd
             .toPlot()
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -322,7 +322,7 @@ class CountPlot : SampleHelper("stat", "guides") {
             fillColor("drv") { scale = categoricalColorBrewer(BrewerPalette.Qualitative.Dark2) }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -334,6 +334,6 @@ class CountPlot : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 }
\ No newline at end of file
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/errorBars.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/errorBars.kt
index bae316d83..729408021 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/errorBars.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/errorBars.kt
@@ -72,7 +72,7 @@ class ErrorBars : SampleHelper("geoms", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
 
     }
 
@@ -107,7 +107,7 @@ class ErrorBars : SampleHelper("geoms", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -143,7 +143,7 @@ class ErrorBars : SampleHelper("geoms", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -206,7 +206,7 @@ class ErrorBars : SampleHelper("geoms", "guides") {
 
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -249,7 +249,7 @@ class ErrorBars : SampleHelper("geoms", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -275,7 +275,7 @@ class ErrorBars : SampleHelper("geoms", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -306,7 +306,7 @@ class ErrorBars : SampleHelper("geoms", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -338,7 +338,7 @@ class ErrorBars : SampleHelper("geoms", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -377,6 +377,6 @@ class ErrorBars : SampleHelper("geoms", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 }
\ No newline at end of file
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/exportToFile.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/exportToFile.kt
index 5a6b3f295..64e7ab2b8 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/exportToFile.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/exportToFile.kt
@@ -53,6 +53,6 @@ class ExportToFile : SampleHelper("other", "guides") {
 
         myPlot
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 }
\ No newline at end of file
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/facets.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/facets.kt
index 09b33e970..3b3b8cf39 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/facets.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/facets.kt
@@ -55,7 +55,7 @@ class Facets : SampleHelper("multiplot", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -73,7 +73,7 @@ class Facets : SampleHelper("multiplot", "guides") {
             facetGridX(`number of cylinders`)
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -91,7 +91,7 @@ class Facets : SampleHelper("multiplot", "guides") {
             facetGrid(`number of cylinders`, `origin of car`)
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -109,7 +109,7 @@ class Facets : SampleHelper("multiplot", "guides") {
             facetGrid(`number of cylinders`, `origin of car`, xFormat = "{d} cyl", yOrder = OrderDirection.DESCENDING)
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -129,7 +129,7 @@ class Facets : SampleHelper("multiplot", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -150,7 +150,7 @@ class Facets : SampleHelper("multiplot", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -171,7 +171,7 @@ class Facets : SampleHelper("multiplot", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -189,7 +189,7 @@ class Facets : SampleHelper("multiplot", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -208,7 +208,7 @@ class Facets : SampleHelper("multiplot", "guides") {
             facetGridY(`origin of car`)
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -227,7 +227,7 @@ class Facets : SampleHelper("multiplot", "guides") {
             facetGridY(`origin of car`, scalesSharing = ScalesSharing.FREE_Y)
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -248,7 +248,7 @@ class Facets : SampleHelper("multiplot", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -269,7 +269,7 @@ class Facets : SampleHelper("multiplot", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 }
 
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/heatmap.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/heatmap.kt
index e9a24c71c..4ec371074 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/heatmap.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/heatmap.kt
@@ -14,7 +14,6 @@ import org.jetbrains.kotlinx.kandy.letsplot.multiplot.plotGrid
 import org.jetbrains.kotlinx.kandy.letsplot.samples.SampleHelper
 import org.jetbrains.kotlinx.kandy.letsplot.scales.BrewerPalette
 import org.jetbrains.kotlinx.kandy.letsplot.scales.continuousColorBrewer
-import org.jetbrains.kotlinx.kandy.letsplot.x
 import org.jetbrains.kotlinx.kandy.util.color.Color
 import org.jetbrains.kotlinx.statistics.kandy.layers.heatmap
 import org.jetbrains.kotlinx.statistics.kandy.statplots.configure
@@ -78,7 +77,7 @@ class Heatmap : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -96,7 +95,7 @@ class Heatmap : SampleHelper("stat", "guides") {
         }
         statCount2DAndTilePlot
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -108,7 +107,7 @@ class Heatmap : SampleHelper("stat", "guides") {
         }
         heatmapLayerPlot
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -125,7 +124,7 @@ class Heatmap : SampleHelper("stat", "guides") {
         // SampleStart
         plotGrid(listOf(statCount2DAndTilePlot, heatmapLayerPlot))
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -143,7 +142,7 @@ class Heatmap : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -153,7 +152,7 @@ class Heatmap : SampleHelper("stat", "guides") {
             heatmap(`class`, drv, hwy)
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -165,7 +164,7 @@ class Heatmap : SampleHelper("stat", "guides") {
         )
             // SampleEnd
             .toPlot()
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -174,7 +173,7 @@ class Heatmap : SampleHelper("stat", "guides") {
         df.heatmap("class", "drv")
             // SampleEnd
             .toPlot()
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -190,7 +189,7 @@ class Heatmap : SampleHelper("stat", "guides") {
         }
             // SampleEnd
             .toPlot()
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -218,6 +217,6 @@ class Heatmap : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 }
\ No newline at end of file
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/jitterPoints.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/jitterPoints.kt
index 1172cfe57..e23b73120 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/jitterPoints.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/jitterPoints.kt
@@ -29,7 +29,7 @@ class JitterPoints : SampleHelper("geoms", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/labelFormat.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/labelFormat.kt
index 8a5df0589..765ad0115 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/labelFormat.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/labelFormat.kt
@@ -60,7 +60,7 @@ class LabelFormat : SampleHelper("layout", "guides") {
             layout.size = 900 to 400
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -79,7 +79,7 @@ class LabelFormat : SampleHelper("layout", "guides") {
             layout.size = 900 to 400
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -98,7 +98,7 @@ class LabelFormat : SampleHelper("layout", "guides") {
             layout.size = 900 to 400
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -120,7 +120,7 @@ class LabelFormat : SampleHelper("layout", "guides") {
             layout.size = 900 to 400
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -141,7 +141,7 @@ class LabelFormat : SampleHelper("layout", "guides") {
             layout.size = 900 to 400
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -176,6 +176,6 @@ class LabelFormat : SampleHelper("layout", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 }
\ No newline at end of file
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/legendAndAxis.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/legendAndAxis.kt
index 77d380bd7..51be8bd04 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/legendAndAxis.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/legendAndAxis.kt
@@ -50,7 +50,7 @@ class LegendAndAxis : SampleHelper("layout", "guides") {
             layout.size = 600 to 250
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -71,7 +71,7 @@ class LegendAndAxis : SampleHelper("layout", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -92,7 +92,7 @@ class LegendAndAxis : SampleHelper("layout", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -117,7 +117,7 @@ class LegendAndAxis : SampleHelper("layout", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -134,7 +134,7 @@ class LegendAndAxis : SampleHelper("layout", "guides") {
             layout.size = 700 to 350
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -160,7 +160,7 @@ class LegendAndAxis : SampleHelper("layout", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -200,6 +200,6 @@ class LegendAndAxis : SampleHelper("layout", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 }
\ No newline at end of file
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/lines.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/lines.kt
index 3c77bf2ed..b954b4342 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/lines.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/lines.kt
@@ -75,7 +75,7 @@ class Lines : SampleHelper("geoms", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -107,7 +107,7 @@ class Lines : SampleHelper("geoms", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -120,7 +120,7 @@ class Lines : SampleHelper("geoms", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -133,7 +133,7 @@ class Lines : SampleHelper("geoms", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     private fun generateArchimedeanDataMap(n: Int = 25, k: Double = 1.0, a: Double = 1.0): Map<String, List<Double>> {
@@ -197,6 +197,6 @@ class Lines : SampleHelper("geoms", "guides") {
             add(segments, 0.5, 0.5, 0.5, 0.5)
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 }
\ No newline at end of file
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/pie.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/pie.kt
index ab6ac2305..e9c31b186 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/pie.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/pie.kt
@@ -76,7 +76,7 @@ class Pie : SampleHelper("geoms", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -98,7 +98,7 @@ class Pie : SampleHelper("geoms", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -142,7 +142,7 @@ class Pie : SampleHelper("geoms", "guides") {
             layout.style(Style.Void)
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -194,6 +194,6 @@ class Pie : SampleHelper("geoms", "guides") {
             )
         )
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 }
\ No newline at end of file
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/plotBunch.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/plotBunch.kt
index be74d90b2..a8b7e35d3 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/plotBunch.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/plotBunch.kt
@@ -187,7 +187,7 @@ class PlotBunch : SampleHelper("multiplot", "guides") {
             }, 0.5, 0.5, 0.5, 0.5)
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/quickStartGuide.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/quickStartGuide.kt
index 9b1226b5c..22eec9d8a 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/quickStartGuide.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/quickStartGuide.kt
@@ -148,7 +148,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -175,7 +175,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
 
@@ -218,7 +218,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -252,7 +252,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -275,7 +275,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -296,7 +296,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -314,7 +314,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             y.axis.limits = 0.0..1.0
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -351,7 +351,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -399,7 +399,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -424,7 +424,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
         }
         mpgInfoPlot
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -442,7 +442,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
         }
         mpgCountPlot
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -471,7 +471,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -496,7 +496,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -514,7 +514,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -531,7 +531,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -558,7 +558,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
         }
         meanCylPlot
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -576,7 +576,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -593,7 +593,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -626,7 +626,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
         // SampleStart
         plotGrid(listOf(mpgInfoPlot, mpgCountPlot, meanCylPlot), nCol = 2)
             // SampleEnd
-            .saveSample(scaling = false)
+            .savePlotSVGSample(scaling = false)
     }
 
     @Test
@@ -663,7 +663,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             add(mpgInfoPlot, 0.0, 0.4, 1.0, 0.6)
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -689,7 +689,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             facetGridX(drv, scalesSharing = ScalesSharing.FREE_X)
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -715,7 +715,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             facetGridY(cyl, format = "d")
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -741,7 +741,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             facetGrid(drv, cyl, yFormat = "d")
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -770,7 +770,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -818,7 +818,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -831,7 +831,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
         }
         histPlot
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -850,7 +850,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
 
         plotGrid(listOf(histPlot, binBarPlot), 2)
             // SampleEnd
-            .saveSample(scaling = false)
+            .savePlotSVGSample(scaling = false)
     }
 
     @Test
@@ -875,7 +875,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -896,7 +896,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         ), 2)
             // SampleEnd
-            .saveSample(scaling = false)
+            .savePlotSVGSample(scaling = false)
     }
 
     @Test
@@ -918,7 +918,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             layout.title = "PLOT TITLE"
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -932,7 +932,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             layout.style(Style.Classic)
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -985,7 +985,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             ), 2
         )
             // SampleEnd
-            .saveSample(scaling = false)
+            .savePlotSVGSample(scaling = false)
     }
 
     @Test
@@ -1009,7 +1009,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
 
         plotWithStyle(simpleCustomStyle)
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -1020,7 +1020,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
         }
         plotWithStyle(blankAxesStyle)
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -1037,7 +1037,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -1054,7 +1054,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -1071,7 +1071,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -1093,7 +1093,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -1110,7 +1110,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -1127,7 +1127,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -1144,7 +1144,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -1166,7 +1166,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -1193,7 +1193,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -1213,6 +1213,6 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
         }
         plotForExport
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 }
\ No newline at end of file
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/ribbon.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/ribbon.kt
index 44ff922e8..d04047ee0 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/ribbon.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/ribbon.kt
@@ -50,6 +50,6 @@ class Ribbon : SampleHelper("geoms", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 }
\ No newline at end of file
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/scatterPlot.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/scatterPlot.kt
index 7b9dcbb57..05d5171ab 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/scatterPlot.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/scatterPlot.kt
@@ -66,7 +66,7 @@ class Scatter : SampleHelper("geoms", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -85,7 +85,7 @@ class Scatter : SampleHelper("geoms", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -106,7 +106,7 @@ class Scatter : SampleHelper("geoms", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -138,7 +138,7 @@ class Scatter : SampleHelper("geoms", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/seriesHack.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/seriesHack.kt
index 91e96d8f6..dfd2e16f2 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/seriesHack.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/seriesHack.kt
@@ -56,7 +56,7 @@ class SeriesHack : SampleHelper("other", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -70,7 +70,7 @@ class SeriesHack : SampleHelper("other", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -107,7 +107,7 @@ class SeriesHack : SampleHelper("other", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     private val gatheredDF = df.gather("ysA", "ysB", "ysC")
@@ -143,6 +143,6 @@ class SeriesHack : SampleHelper("other", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 }
\ No newline at end of file
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/styles.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/styles.kt
index 92adeb82e..e965a083e 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/styles.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/styles.kt
@@ -133,7 +133,7 @@ class Styles : SampleHelper("layout", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
 
     }
 
@@ -173,7 +173,7 @@ class Styles : SampleHelper("layout", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -214,7 +214,7 @@ class Styles : SampleHelper("layout", "guides") {
             facetGridX(year)
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -256,7 +256,7 @@ class Styles : SampleHelper("layout", "guides") {
             fit = true
         )
             // SampleEnd
-            .saveSample(scaling = false)
+            .savePlotSVGSample(scaling = false)
     }
 
     @Test
@@ -323,7 +323,7 @@ class Styles : SampleHelper("layout", "guides") {
             fit = true
         )
             // SampleEnd
-            .saveSample(scaling = false)
+            .savePlotSVGSample(scaling = false)
     }
 
     @Test
@@ -337,7 +337,7 @@ class Styles : SampleHelper("layout", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -357,7 +357,7 @@ class Styles : SampleHelper("layout", "guides") {
             nCol = 2
         )
             // SampleEnd
-            .saveSample(scaling = false)
+            .savePlotSVGSample(scaling = false)
     }
 
     @Test
@@ -373,7 +373,7 @@ class Styles : SampleHelper("layout", "guides") {
             nCol = 2
         )
             // SampleEnd
-            .saveSample(scaling = false)
+            .savePlotSVGSample(scaling = false)
     }
 
     @Test
@@ -389,7 +389,7 @@ class Styles : SampleHelper("layout", "guides") {
             nCol = 2
         )
             // SampleEnd
-            .saveSample(scaling = false)
+            .savePlotSVGSample(scaling = false)
     }
 
     @Test
@@ -405,7 +405,7 @@ class Styles : SampleHelper("layout", "guides") {
             nCol = 2
         )
             // SampleEnd
-            .saveSample(scaling = false)
+            .savePlotSVGSample(scaling = false)
     }
 
     @Test
@@ -421,7 +421,7 @@ class Styles : SampleHelper("layout", "guides") {
             nCol = 2
         )
             // SampleEnd
-            .saveSample(scaling = false)
+            .savePlotSVGSample(scaling = false)
     }
 
     @Test
@@ -439,7 +439,7 @@ class Styles : SampleHelper("layout", "guides") {
             nCol = 2
         )
             // SampleEnd
-            .saveSample(scaling = false)
+            .savePlotSVGSample(scaling = false)
     }
 
     @Test
@@ -455,7 +455,7 @@ class Styles : SampleHelper("layout", "guides") {
             nCol = 2
         )
             // SampleEnd
-            .saveSample(scaling = false)
+            .savePlotSVGSample(scaling = false)
     }
 
     @Test
@@ -490,7 +490,7 @@ class Styles : SampleHelper("layout", "guides") {
             nCol = 2
         )
             // SampleEnd
-            .saveSample(scaling = false)
+            .savePlotSVGSample(scaling = false)
     }
 
     @Test
@@ -514,7 +514,7 @@ class Styles : SampleHelper("layout", "guides") {
             nCol = 2
         )
             // SampleEnd
-            .saveSample(scaling = false)
+            .savePlotSVGSample(scaling = false)
     }
 
     @Test
@@ -533,7 +533,7 @@ class Styles : SampleHelper("layout", "guides") {
             nCol = 2
         )
             // SampleEnd
-            .saveSample(scaling = false)
+            .savePlotSVGSample(scaling = false)
     }
 
     @Test
@@ -657,7 +657,7 @@ class Styles : SampleHelper("layout", "guides") {
             nCol = 2
         )
             // SampleEnd
-            .saveSample(scaling = false)
+            .savePlotSVGSample(scaling = false)
     }
 
     @Test
@@ -697,6 +697,6 @@ class Styles : SampleHelper("layout", "guides") {
             nCol = 2
         )
             // SampleEnd
-            .saveSample(scaling = false)
+            .savePlotSVGSample(scaling = false)
     }
 }
\ No newline at end of file
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/titleSubtitleCaption.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/titleSubtitleCaption.kt
index 23207ee9d..168445a87 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/titleSubtitleCaption.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/titleSubtitleCaption.kt
@@ -45,7 +45,7 @@ class TitleSubtitleCaption : SampleHelper("layout", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -60,7 +60,7 @@ class TitleSubtitleCaption : SampleHelper("layout", "guides") {
             layout.title = "The plot title using 'layout.title'"
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -77,7 +77,7 @@ class TitleSubtitleCaption : SampleHelper("layout", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -95,7 +95,7 @@ class TitleSubtitleCaption : SampleHelper("layout", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -114,7 +114,7 @@ class TitleSubtitleCaption : SampleHelper("layout", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -138,7 +138,7 @@ class TitleSubtitleCaption : SampleHelper("layout", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -178,7 +178,7 @@ class TitleSubtitleCaption : SampleHelper("layout", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -210,7 +210,7 @@ class TitleSubtitleCaption : SampleHelper("layout", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -236,7 +236,7 @@ class TitleSubtitleCaption : SampleHelper("layout", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -252,7 +252,7 @@ class TitleSubtitleCaption : SampleHelper("layout", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -271,7 +271,7 @@ class TitleSubtitleCaption : SampleHelper("layout", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -287,7 +287,7 @@ class TitleSubtitleCaption : SampleHelper("layout", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -306,7 +306,7 @@ class TitleSubtitleCaption : SampleHelper("layout", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -330,6 +330,6 @@ class TitleSubtitleCaption : SampleHelper("layout", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 }
\ No newline at end of file
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/heatmap.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/heatmap.kt
index b4b228632..7a40a2cf4 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/heatmap.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/heatmap.kt
@@ -55,7 +55,7 @@ class Heatmap : SampleHelper("heatmap") {
             heatmap("days", "drinks")
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -122,7 +122,7 @@ class Heatmap : SampleHelper("heatmap") {
             y.axis.breaks(df.get { "pclass"() }.distinct().toList(), format = "d")
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
 }
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/histogram.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/histogram.kt
index d246b2386..2ada71630 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/histogram.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/histogram.kt
@@ -6,7 +6,6 @@ import org.jetbrains.kotlinx.kandy.letsplot.feature.layout
 import org.jetbrains.kotlinx.kandy.letsplot.layers.bars
 import org.jetbrains.kotlinx.kandy.letsplot.layers.line
 import org.jetbrains.kotlinx.kandy.letsplot.settings.LineType
-import org.jetbrains.kotlinx.kandy.letsplot.x
 import org.jetbrains.kotlinx.kandy.util.color.Color
 import org.jetbrains.kotlinx.kandy.util.context.invoke
 import org.jetbrains.kotlinx.statistics.binning.BinsOption
@@ -29,7 +28,7 @@ class Histogram : SampleHelper("histogram") {
             histogram("sample")
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -77,7 +76,7 @@ class Histogram : SampleHelper("histogram") {
             layout.title = "Flight length experiment"
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -130,7 +129,7 @@ class Histogram : SampleHelper("histogram") {
             histogram("sample")
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -179,7 +178,7 @@ class Histogram : SampleHelper("histogram") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/line.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/line.kt
index 129e1f5a3..a1cac6785 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/line.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/line.kt
@@ -1,8 +1,10 @@
 package org.jetbrains.kotlinx.kandy.letsplot.samples.kdoc
 
 import org.jetbrains.kotlinx.kandy.letsplot.jupyter.KandyLetsPlotJupyterTest
+import kotlin.test.Ignore
 import kotlin.test.Test
 
+@Ignore
 class LineTest : KandyLetsPlotJupyterTest() {
 
     private val plotLine = """
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/pie.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/pie.kt
index c1e22dee4..f05fa008e 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/pie.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/pie.kt
@@ -1,8 +1,10 @@
 package org.jetbrains.kotlinx.kandy.letsplot.samples.kdoc
 
 import org.jetbrains.kotlinx.kandy.letsplot.jupyter.KandyLetsPlotJupyterTest
+import kotlin.test.Ignore
 import kotlin.test.Test
 
+@Ignore
 class PieTest : KandyLetsPlotJupyterTest() {
 
     private val plotPie = """
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/pointRanges.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/pointRanges.kt
index 6fed8d99d..fea9358d0 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/pointRanges.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/pointRanges.kt
@@ -1,8 +1,10 @@
 package org.jetbrains.kotlinx.kandy.letsplot.samples.kdoc
 
 import org.jetbrains.kotlinx.kandy.letsplot.jupyter.KandyLetsPlotJupyterTest
+import kotlin.test.Ignore
 import kotlin.test.Test
 
+@Ignore
 class PointRangesTest : KandyLetsPlotJupyterTest() {
 
     private val plotPointRanges = """
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/raster.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/raster.kt
index a9771410d..7abeb3d80 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/raster.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/raster.kt
@@ -1,8 +1,10 @@
 package org.jetbrains.kotlinx.kandy.letsplot.samples.kdoc
 
 import org.jetbrains.kotlinx.kandy.letsplot.jupyter.KandyLetsPlotJupyterTest
+import kotlin.test.Ignore
 import kotlin.test.Test
 
+@Ignore
 class RasterTest : KandyLetsPlotJupyterTest() {
 
     private val plotRaster = """
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/rectangles.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/rectangles.kt
index cc56ccc84..4e306b3d4 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/rectangles.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/rectangles.kt
@@ -1,8 +1,10 @@
 package org.jetbrains.kotlinx.kandy.letsplot.samples.kdoc
 
 import org.jetbrains.kotlinx.kandy.letsplot.jupyter.KandyLetsPlotJupyterTest
+import kotlin.test.Ignore
 import kotlin.test.Test
 
+@Ignore
 class RectanglesTest : KandyLetsPlotJupyterTest() {
 
     private val plotRectangles = """
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/ribbon.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/ribbon.kt
index 7a9012182..79b38f178 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/ribbon.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/ribbon.kt
@@ -1,8 +1,10 @@
 package org.jetbrains.kotlinx.kandy.letsplot.samples.kdoc
 
 import org.jetbrains.kotlinx.kandy.letsplot.jupyter.KandyLetsPlotJupyterTest
+import kotlin.test.Ignore
 import kotlin.test.Test
 
+@Ignore
 class RibbonTest : KandyLetsPlotJupyterTest() {
 
     private val plotRibbon = """
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/segments.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/segments.kt
index 17512044d..ccff04456 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/segments.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/segments.kt
@@ -1,8 +1,10 @@
 package org.jetbrains.kotlinx.kandy.letsplot.samples.kdoc
 
 import org.jetbrains.kotlinx.kandy.letsplot.jupyter.KandyLetsPlotJupyterTest
+import kotlin.test.Ignore
 import kotlin.test.Test
 
+@Ignore
 class SegmentsTest : KandyLetsPlotJupyterTest() {
 
     private val plotSegments = """
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/text.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/text.kt
index 59e712a6e..4405e619f 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/text.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/text.kt
@@ -1,8 +1,10 @@
 package org.jetbrains.kotlinx.kandy.letsplot.samples.kdoc
 
 import org.jetbrains.kotlinx.kandy.letsplot.jupyter.KandyLetsPlotJupyterTest
+import kotlin.test.Ignore
 import kotlin.test.Test
 
+@Ignore
 class TextTest : KandyLetsPlotJupyterTest() {
 
     private val plotText = """
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/tiles.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/tiles.kt
index 410372b6c..0f0d60f63 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/tiles.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/kdoc/tiles.kt
@@ -1,8 +1,10 @@
 package org.jetbrains.kotlinx.kandy.letsplot.samples.kdoc
 
 import org.jetbrains.kotlinx.kandy.letsplot.jupyter.KandyLetsPlotJupyterTest
+import kotlin.test.Ignore
 import kotlin.test.Test
 
+@Ignore
 class TilesTest : KandyLetsPlotJupyterTest() {
 
     private val plotTiles = """
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/layout.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/layout.kt
index 55e7bbfea..692ee758f 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/layout.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/layout.kt
@@ -27,7 +27,7 @@ class Layout : SampleHelper("layout") {
             }
         }
             // SampleEnd
-            .saveSample(true)
+            .savePlotSVGSample(true)
     }
 
     @Test
@@ -46,7 +46,7 @@ class Layout : SampleHelper("layout") {
             }
         }
             // SampleEnd
-            .saveSample(true)
+            .savePlotSVGSample(true)
     }
 
     @Test
@@ -83,7 +83,7 @@ class Layout : SampleHelper("layout") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
 }
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/lines.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/lines.kt
index b1b3cbd69..a0280b4f2 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/lines.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/lines.kt
@@ -40,7 +40,7 @@ class Lines : SampleHelper("line") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -84,7 +84,7 @@ class Lines : SampleHelper("line") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -136,7 +136,7 @@ class Lines : SampleHelper("line") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -190,7 +190,7 @@ class Lines : SampleHelper("line") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -246,7 +246,7 @@ class Lines : SampleHelper("line") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -298,7 +298,7 @@ class Lines : SampleHelper("line") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -344,7 +344,7 @@ class Lines : SampleHelper("line") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -394,7 +394,7 @@ class Lines : SampleHelper("line") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -442,7 +442,7 @@ class Lines : SampleHelper("line") {
             layout.size = 1000 to 450
         }
             // SampleEnd
-            .saveSample(true)
+            .savePlotSVGSample(true)
     }
 
     @Test
@@ -519,7 +519,7 @@ class Lines : SampleHelper("line") {
                 val layout = (this.features as MutableMap)[FeatureName("layout")] as? Layout
                 (this.features as MutableMap)[FeatureName("layout")] = layout?.copy(size = null) ?: Layout(size = null)
             }
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -561,7 +561,7 @@ class Lines : SampleHelper("line") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -580,7 +580,7 @@ class Lines : SampleHelper("line") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -603,7 +603,7 @@ class Lines : SampleHelper("line") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -651,6 +651,6 @@ class Lines : SampleHelper("line") {
         }
         plotGrid(listOf(linePlot, pathPlot))
             // SampleEnd
-            .saveSample(true)
+            .savePlotSVGSample(true)
     }
 }
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/pie.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/pie.kt
index 4250b0c2a..843225061 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/pie.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/pie.kt
@@ -28,7 +28,7 @@ class Pie : SampleHelper("pie") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -73,7 +73,7 @@ class Pie : SampleHelper("pie") {
             layout.style(Style.Void)
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -121,7 +121,7 @@ class Pie : SampleHelper("pie") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -164,7 +164,7 @@ class Pie : SampleHelper("pie") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -211,7 +211,7 @@ class Pie : SampleHelper("pie") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -259,7 +259,7 @@ class Pie : SampleHelper("pie") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/points.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/points.kt
index 54bca36c6..d00d37f99 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/points.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/points.kt
@@ -44,7 +44,7 @@ class Points : SampleHelper("points") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -100,7 +100,7 @@ class Points : SampleHelper("points") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -159,7 +159,7 @@ class Points : SampleHelper("points") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -210,7 +210,7 @@ class Points : SampleHelper("points") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -249,7 +249,7 @@ class Points : SampleHelper("points") {
             layout.title = "Penalty Shot Outcomes Analysis"
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -305,7 +305,7 @@ class Points : SampleHelper("points") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -391,7 +391,7 @@ class Points : SampleHelper("points") {
             layout.title = "May GitHub contributions"
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -460,7 +460,7 @@ class Points : SampleHelper("points") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -504,7 +504,7 @@ class Points : SampleHelper("points") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -548,7 +548,7 @@ class Points : SampleHelper("points") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -566,6 +566,6 @@ class Points : SampleHelper("points") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 }
\ No newline at end of file
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/quickstart.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/quickstart.kt
index 5c54ce91f..056e09f8f 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/quickstart.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/quickstart.kt
@@ -56,7 +56,7 @@ class QuickStart : SampleHelper("", "") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/ribbon.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/ribbon.kt
index e7d093c03..97991140b 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/ribbon.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/ribbon.kt
@@ -37,7 +37,7 @@ class Ribbon : SampleHelper("ribbon") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -84,7 +84,7 @@ class Ribbon : SampleHelper("ribbon") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -133,7 +133,7 @@ class Ribbon : SampleHelper("ribbon") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -164,7 +164,7 @@ class Ribbon : SampleHelper("ribbon") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -229,7 +229,7 @@ class Ribbon : SampleHelper("ribbon") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -300,6 +300,6 @@ class Ribbon : SampleHelper("ribbon") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 }
\ No newline at end of file
diff --git a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/tiles.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/tiles.kt
index 87f79a29b..e87b385b0 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/tiles.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/tiles.kt
@@ -25,7 +25,7 @@ class Tiles : SampleHelper("tiles") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -57,7 +57,7 @@ class Tiles : SampleHelper("tiles") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -104,7 +104,7 @@ class Tiles : SampleHelper("tiles") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -134,7 +134,7 @@ class Tiles : SampleHelper("tiles") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -197,7 +197,7 @@ class Tiles : SampleHelper("tiles") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -242,7 +242,7 @@ class Tiles : SampleHelper("tiles") {
             heatmap(cols, rows)
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -292,6 +292,6 @@ class Tiles : SampleHelper("tiles") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 }
\ No newline at end of file
diff --git a/settings.gradle.kts b/settings.gradle.kts
index 50b385537..ab02a35a3 100644
--- a/settings.gradle.kts
+++ b/settings.gradle.kts
@@ -20,7 +20,7 @@ include("kandy-util")
 include("examples:idea-examples:lets-plot-simple")
 include("examples:idea-examples:echarts-simple")
 include("kandy-geo")
-include("samples-utils")
+include("kandy-samples-utils")
 
 project(":kandy-util").projectDir = File("./util/kandy-util")
-project(":samples-utils").projectDir = File("./util/samples-utils")
\ No newline at end of file
+project(":kandy-samples-utils").projectDir = File("./util/kandy-samples-utils")
\ No newline at end of file
diff --git a/util/kandy-samples-utils/README.md b/util/kandy-samples-utils/README.md
new file mode 100644
index 000000000..eada8e33d
--- /dev/null
+++ b/util/kandy-samples-utils/README.md
@@ -0,0 +1,54 @@
+# Samples Utils (Kandy & DataFrame)
+
+This module contains special utilities for creating samples (images, tables etc.)
+for Writerside documentation.
+
+The main class of this module `SampleHelper` is a base class for test classes.
+It allows creating sample Kandy and DataFrame samples through
+test running.
+
+## How to use
+
+1. Write a documentation page in [Kotlin Notebook](https://kotlinlang.org/docs/kotlin-notebook-overview.html)
+   (or using [Kotlin Jupyter](https://github.com/Kotlin/kotlin-jupyter)).
+
+2. Run the [nb_to_doc.py](nb_to_doc.py) script on it. It generates two files:
+   .kt and .md.
+    ```bash
+   python nb_to_doc.py doc_notebook.ipynb
+   ```
+    * a .kt file contains a single test class inheriting from `SampleHelper`. For each cell, there's a
+      corresponding test function. Function body copies whole cell code; this code is located between korro dirrectives
+      (`//SampleStart` and `//SampleEnd`). Also, if the output of the cell is a Kandy plot or DataFrame table,
+      there will be added an extension for the last cell statement (after `//SampleEnd`). Running this test causes
+      creating a plot image or HTML table corresponding to this cell output.
+      Run this test class to generate all samples.
+    * a .md file contains all content from the Notebook.
+      For Markdown cells, it copies text without any changes.
+      For code cells, there are FUN directives with a name of corresponding test
+      (`!---FUN test_from_notebook_n -->`). After `korro` run there will be code from tests inserted here.
+      If a cell has an output, there will be an image or table (which are created through running tests) import added.
+
+3. Place these files in required directories, run tests and `korro`.
+
+4. Run the [update_ws_resources.py](update_ws_resources.py) with 2 arguments — path to the resource folder and path
+   to a Writerside shadowed topic with all resources (need to be done to add resources to WS artifact).
+   ```bash
+   python update_ws_resources.py docs/resources docs/topics/_shadow_resources.md
+   ```
+
+5. Require additional Writerside HTML with custom JS.
+   See docs/cfg/buildprofiles.xml, docs/cfg/include_in_head.html, docs/cfg/static/custom.js.
+
+6. Don't work on preview! Deploy Writerside locally, using http-server:
+* Build WS web archive
+![ws_web_archive.png](ws_web_archive.png)
+* Unzip and run in command in the folder:
+    ```bash
+    http-server
+    ```
+   or
+   ```bash
+   python -m http.server  
+   ```
+   (the second one is preferable — it doesn't cache data, need only any python env).
\ No newline at end of file
diff --git a/util/samples-utils/build.gradle.kts b/util/kandy-samples-utils/build.gradle.kts
similarity index 95%
rename from util/samples-utils/build.gradle.kts
rename to util/kandy-samples-utils/build.gradle.kts
index 41e8aef10..9200c5280 100644
--- a/util/samples-utils/build.gradle.kts
+++ b/util/kandy-samples-utils/build.gradle.kts
@@ -15,6 +15,8 @@ dependencies {
     implementation(libs.lets.plot)
     implementation(libs.lets.plot.image)
     implementation(libs.lets.plot.awt)
+
+    testImplementation(libs.kotlin.test)
 }
 
 // add friend modules to access internal properties
diff --git a/util/kandy-samples-utils/nb_to_doc.py b/util/kandy-samples-utils/nb_to_doc.py
new file mode 100644
index 000000000..6fe9381d2
--- /dev/null
+++ b/util/kandy-samples-utils/nb_to_doc.py
@@ -0,0 +1,655 @@
+import os
+import sys
+from typing import List, Tuple, Optional, Any
+
+import nbformat
+from nbformat.notebooknode import NotebookNode
+
+
+def extract_content(notebook_path: str) -> List[Tuple[NotebookNode, Optional[str], Optional[str]]]:
+    """
+    Extracts markdown and code cells from a Jupyter notebook while preserving order, including the title cell.
+
+    Args:
+        notebook_path: Path to the Jupyter notebook file
+
+    Returns:
+        List of tuples containing (cell, output_type, output_content)
+    """
+    try:
+        with open(notebook_path, "r", encoding="utf-8") as f:
+            nb_data = nbformat.read(f, as_version=4)
+    except FileNotFoundError:
+        print(f"Error: Notebook file '{notebook_path}' not found.")
+        sys.exit(1)
+    except Exception as e:
+        print(f"Error reading notebook: {str(e)}")
+        sys.exit(1)
+
+    cells = []
+    for cell in nb_data.cells:
+        output_type = None
+        output_content = None
+
+        if cell.cell_type == "code" and hasattr(cell, 'outputs') and cell.outputs:
+            output_type, output_content = _extract_cell_output(cell.outputs[0])
+
+        cells.append((cell, output_type, output_content))
+    return cells
+
+
+def _extract_cell_output(output: Any) -> Tuple[Optional[str], Optional[str]]:
+    """
+    Extract the type and content of a cell output.
+
+    Args:
+        output: The output object from a notebook cell
+
+    Returns:
+        Tuple of (output_type, output_content)
+    """
+    output_type = None
+    output_content = None
+
+    if hasattr(output, 'data'):
+        if 'application/kotlindataframe+json' in output.data:
+            output_type = 'dataframe'
+        elif 'application/plot+json' in output.data:
+            output_type = 'plot'
+        else:
+            output_type = 'generic'
+            # Try to get output content from different possible fields
+            if 'text/plain' in output.data:
+                output_content = output.data['text/plain']
+    elif hasattr(output, 'text'):
+        output_type = 'generic'
+        output_content = output.text
+    elif hasattr(output, 'data'):
+        output_type = 'generic'
+        output_content = str(output.data)
+
+    return output_type, output_content
+
+
+def create_md_file(md_filename: str, cells: List[Tuple[NotebookNode, Optional[str], Optional[str]]], base_name: str) -> None:
+    """
+    Creates a markdown file preserving the order of markdown and code cells.
+
+    Args:
+        md_filename: Path to the output markdown file
+        cells: List of tuples containing (cell, output_type, output_content)
+        base_name: Base name for function names and class names
+    """
+    try:
+        with open(md_filename, "w", encoding="utf-8") as md_file:
+            # Extract title from the first markdown cell if it exists
+            title, title_cell_index = _find_title_cell(cells)
+
+            # Write the title at the very beginning if found
+            if title:
+                md_file.write(title + "\n\n")
+
+            # Add summary tags after the title
+            _write_summary_tags(md_file)
+
+            # Add import tag with the full class name
+            class_name = f"org.jetbrains.kotlinx.kandy.tests.{base_name.capitalize()}Tests"
+            md_file.write(f"<!---IMPORT {class_name}-->\n\n")
+
+            # Process each cell
+            _process_cells_for_md(md_file, cells, title_cell_index, base_name, md_filename)
+    except Exception as e:
+        print(f"Error creating markdown file: {str(e)}")
+        sys.exit(1)
+
+
+def _find_title_cell(cells: List[Tuple[NotebookNode, Optional[str], Optional[str]]]) -> Tuple[Optional[str], Optional[int]]:
+    """
+    Find the title cell in the notebook.
+
+    Args:
+        cells: List of tuples containing (cell, output_type, output_content)
+
+    Returns:
+        Tuple of (title, title_cell_index)
+    """
+    for i, (cell, _, _) in enumerate(cells):
+        if cell.cell_type == "markdown":
+            lines = cell.source.strip().split('\n')
+            if lines and lines[0].startswith('# '):
+                return cell.source, i
+    return None, None
+
+
+def _write_summary_tags(file) -> None:
+    """
+    Write summary tags to the markdown file.
+
+    Args:
+        file: File object to write to
+    """
+    file.write("<web-summary>\nTODO: write summary\n</web-summary>\n\n")
+    file.write("<card-summary>\nTODO: write summary\n</card-summary>\n\n")
+    file.write("<link-summary>\nTODO: write summary\n</link-summary>\n\n")
+
+
+def _process_cells_for_md(
+    md_file, 
+    cells: List[Tuple[NotebookNode, Optional[str], Optional[str]]], 
+    title_cell_index: Optional[int], 
+    base_name: str,
+    md_filename: str
+) -> None:
+    """
+    Process cells for markdown output.
+
+    Args:
+        md_file: File object to write to
+        cells: List of tuples containing (cell, output_type, output_content)
+        title_cell_index: Index of the title cell
+        base_name: Base name for function names
+        md_filename: Path to the output markdown file
+    """
+    code_index = 1
+    for i, (cell, output_type, output_content) in enumerate(cells):
+        # Skip the title cell as we've already written it
+        if i == title_cell_index:
+            continue
+
+        if cell.cell_type == "markdown":
+            md_file.write(cell.source + "\n\n")
+        elif cell.cell_type == "code":
+            function_name = f"{base_name}_{code_index}"
+            md_file.write(f"<!---FUN {function_name}-->\n\n")
+            md_file.write("<!---END-->\n\n")
+
+            if output_type == 'dataframe':
+                # Add intermediate folder with the file name for table resources
+                folder_name = os.path.splitext(os.path.basename(md_filename))[0]
+                md_file.write(
+                    f'<inline-frame src="./resources/{function_name}.html" width="705px" height="500px"></inline-frame>\n\n')
+            elif output_type == 'plot':
+                md_file.write(f'![{function_name}]({function_name}.svg)\n\n')
+            elif output_type == 'generic' and output_content:
+                md_file.write("Output:\n```\n")
+                md_file.write(output_content)
+                md_file.write("\n```\n\n")
+
+            code_index += 1
+
+
+def extract_declarations(code: str) -> List[str]:
+    """
+    Extract variable, function, and class declarations.
+
+    Args:
+        code: Kotlin code to extract declarations from
+
+    Returns:
+        List of declaration strings
+    """
+    declarations = []
+    lines = code.split('\n')
+    i = 0
+    # Track nesting level to only extract top-level declarations
+    nesting_level = 0
+
+    while i < len(lines):
+        line = lines[i].rstrip()
+        stripped = line.strip()
+
+        # Skip empty lines and comments
+        if not stripped or stripped.startswith('//'):
+            i += 1
+            continue
+
+        # Only process declarations at the top level (nesting_level == 0)
+        if nesting_level == 0:
+            # Handle import statements
+            if stripped.startswith('import '):
+                declarations.append(('import', stripped))
+                i += 1
+                continue
+
+            # Handle class-like declarations
+            elif _is_class_declaration(stripped):
+                declaration, i = _extract_block_declaration(lines, i, 'class')
+                declarations.append(declaration)
+                # Update nesting level after extraction
+                continue
+
+            # Handle variable declarations (val/var)
+            elif stripped.startswith(('val ', 'var ')):
+                declaration, i = _extract_variable_declaration(lines, i)
+                declarations.append(declaration)
+                continue
+
+            # Handle function declarations
+            elif stripped.startswith('fun '):
+                declaration, i = _extract_function_declaration(lines, i)
+                if declaration:
+                    declarations.append(declaration)
+                continue
+            else:
+                # Update nesting level for non-declaration lines
+                nesting_level += line.count('{') - line.count('}')
+                i += 1
+        else:
+            # Update nesting level for lines inside nested blocks
+            nesting_level += line.count('{') - line.count('}')
+            # Skip lines inside nested blocks
+            i += 1
+
+    # Make all declarations private
+    final_declarations = _make_declarations_private(declarations)
+
+    return final_declarations
+
+
+def _is_class_declaration(line: str) -> bool:
+    """
+    Check if a line is a class declaration.
+
+    Args:
+        line: Line to check
+
+    Returns:
+        True if the line is a class declaration, False otherwise
+    """
+    class_keywords = ('enum class', 'interface', 'class', 'data class', 'value class')
+    return any(line.startswith(kw) for kw in class_keywords)
+
+
+def _extract_block_declaration(lines: List[str], start_index: int, decl_type: str) -> Tuple[Tuple[str, str], int]:
+    """
+    Extract a block declaration (class, function) from lines.
+
+    Args:
+        lines: List of code lines
+        start_index: Index to start extraction from
+        decl_type: Type of declaration ('class' or 'function')
+
+    Returns:
+        Tuple of ((declaration_type, declaration_text), new_index)
+    """
+    line = lines[start_index].rstrip()
+    current_lines = [line]
+    brace_count = line.count('{') - line.count('}')
+    i = start_index + 1
+
+    while i < len(lines) and (brace_count > 0 or (brace_count == 0 and '{' not in line)):
+        next_line = lines[i]
+        current_lines.append(next_line)
+        brace_count += next_line.count('{') - next_line.count('}')
+        i += 1
+
+    full_decl = '\n'.join(current_lines)
+    return (decl_type, full_decl), i
+
+
+def _extract_variable_declaration(lines: List[str], start_index: int) -> Tuple[Tuple[str, str], int]:
+    """
+    Extract a variable declaration from lines.
+
+    Args:
+        lines: List of code lines
+        start_index: Index to start extraction from
+
+    Returns:
+        Tuple of ((declaration_type, declaration_text), new_index)
+    """
+    line = lines[start_index].rstrip()
+    current_lines = [line]
+    brace_count = line.count('{') - line.count('}')
+    open_parens = line.count('(') - line.count(')')
+    i = start_index + 1
+
+    # Check if the declaration is complete on the first line
+    is_complete = '=' in line and brace_count == 0 and open_parens == 0 and not line.endswith('=')
+
+    # Continue extraction if the declaration is not complete or if there are unbalanced braces/parentheses
+    while i < len(lines):
+        next_line = lines[i].rstrip()
+        next_line_stripped = next_line.strip()
+
+        # Check if this line is a continuation of the variable declaration
+        is_continuation = (
+            brace_count > 0 or 
+            open_parens > 0 or 
+            next_line_stripped.startswith('.') or  # Method chaining
+            next_line_stripped.startswith('=') or  # Assignment operator
+            line.endswith('=') or  # Previous line ended with =
+            # Common operators that might continue a declaration
+            any(line.endswith(op) for op in ['+', '-', '*', '/', '%', '&&', '||', '?', ':', '??']) or
+            # Check for method chaining patterns
+            (i > start_index and any(current_lines[-1].rstrip().endswith(op) for op in ['.', '(', '{', '[', ','])) or
+            # Check for method calls with .into() pattern
+            '.into(' in next_line_stripped
+        )
+
+        # Check if this is a comment line
+        is_comment = next_line_stripped.startswith('//')
+
+        # Check if we should continue extraction
+        should_continue = not is_complete or brace_count > 0 or open_parens > 0 or is_continuation
+
+        if not should_continue:
+            # If this is a comment line, check the next line for method chaining
+            if is_comment and i + 1 < len(lines):
+                next_next_line = lines[i + 1].strip()
+                if next_next_line.startswith('.') or '.into(' in next_next_line:
+                    # Include the comment line and continue extraction
+                    current_lines.append(next_line)
+                    i += 1
+                    continue
+
+            break
+
+        if not is_continuation:
+            # Check if this is a new declaration or statement
+            if (next_line_stripped.startswith(('val ', 'var ', 'fun ', 'class ', 'if ', 'for ', 'while ')) or 
+                next_line_stripped == ''):
+                break
+
+            # If this is a comment, include it and continue
+            if is_comment:
+                current_lines.append(next_line)
+                i += 1
+                continue
+
+        current_lines.append(next_line)
+        brace_count += next_line.count('{') - next_line.count('}')
+        open_parens += next_line.count('(') - next_line.count(')')
+
+        # Update line for the next iteration to check for operators
+        line = next_line
+
+        # Check if the declaration is now complete
+        is_complete = brace_count == 0 and open_parens == 0
+
+        i += 1
+
+    full_decl = '\n'.join(current_lines)
+    return ('property', full_decl), i
+
+
+def _extract_function_declaration(lines: List[str], start_index: int) -> Tuple[Optional[Tuple[str, str]], int]:
+    """
+    Extract a function declaration from lines.
+
+    Args:
+        lines: List of code lines
+        start_index: Index to start extraction from
+
+    Returns:
+        Tuple of ((declaration_type, declaration_text), new_index) or (None, new_index)
+    """
+    declaration, i = _extract_block_declaration(lines, start_index, 'function')
+    _, full_decl = declaration
+
+    # Skip test functions
+    if '@Test' in full_decl or 'test' in full_decl.lower():
+        return None, i
+
+    return declaration, i
+
+
+def _make_declarations_private(declarations: List[Tuple[str, str]]) -> List[str]:
+    """
+    Make all declarations private.
+
+    Args:
+        declarations: List of (declaration_type, declaration_text) tuples
+
+    Returns:
+        List of declaration strings
+    """
+    final_declarations = []
+
+    for decl_type, decl in declarations:
+        if decl_type == 'import':
+            final_declarations.append(decl)
+        else:
+            lines = decl.split('\n')
+            if not lines[0].lstrip().startswith('private '):
+                indent = len(lines[0]) - len(lines[0].lstrip())
+                lines[0] = ' ' * indent + 'private ' + lines[0].lstrip()
+            final_declarations.append('\n'.join(lines))
+
+    return final_declarations
+
+
+def create_kt_file(kt_filename: str, cells: List[Tuple[NotebookNode, Optional[str], Optional[str]]], base_name: str) -> None:
+    """
+    Creates a Kotlin test file preserving order of code cells.
+
+    Args:
+        kt_filename: Path to the output Kotlin file
+        cells: List of tuples containing (cell, output_type, output_content)
+        base_name: Base name for function names and class names
+    """
+    try:
+        # Collect all definitions and imports
+        defs, imports = _collect_definitions_and_imports(cells)
+
+        with open(kt_filename, "w", encoding="utf-8") as kt_file:
+            _write_kt_file_header(kt_file, base_name)
+            _write_kt_file_imports(kt_file, imports)
+            _write_kt_file_definitions(kt_file, defs, base_name)
+            _write_kt_file_tests(kt_file, cells, base_name)
+            _write_kt_file_footer(kt_file)
+    except Exception as e:
+        print(f"Error creating Kotlin file: {str(e)}")
+        sys.exit(1)
+
+
+def _collect_definitions_and_imports(cells: List[Tuple[NotebookNode, Optional[str], Optional[str]]]) -> Tuple[List[str], List[str]]:
+    """
+    Collect all definitions and imports from code cells.
+
+    Args:
+        cells: List of tuples containing (cell, output_type, output_content)
+
+    Returns:
+        Tuple of (definitions, imports)
+    """
+    defs = []
+    imports = []
+
+    for cell, _, _ in cells:
+        if cell.cell_type == "code":
+            cell_decls_all = extract_declarations(cell.source)
+            cell_imports = [decl for decl in cell_decls_all if decl.startswith('import')]
+            cell_defs = [decl for decl in cell_decls_all if not decl.startswith('import')]
+            defs.extend(cell_defs)
+            imports.extend(cell_imports)
+
+    return defs, imports
+
+
+def _write_kt_file_header(file, base_name: str) -> None:
+    """
+    Write the header of the Kotlin file.
+
+    Args:
+        file: File object to write to
+        base_name: Base name for class name
+    """
+    _write_line(file, "package org.jetbrains.kotlinx.kandy.tests")
+    _write_line(file, "")
+    _write_line(file, "import kotlin.test.Test")
+
+
+def _write_kt_file_imports(file, imports: List[str]) -> None:
+    """
+    Write imports to the Kotlin file.
+
+    Args:
+        file: File object to write to
+        imports: List of import statements
+    """
+    # Add required imports
+    required_imports = [
+        "import org.jetbrains.kotlinx.kandy.letsplot.*",
+        "import org.jetbrains.kotlinx.kandy.letsplot.export.*",
+        "import org.jetbrains.kotlinx.kandy.letsplot.feature.*",
+        "import org.jetbrains.kotlinx.kandy.letsplot.layers.*",
+        "import org.jetbrains.kotlinx.kandy.letsplot.multiplot.*",
+        "import org.jetbrains.kotlinx.kandy.letsplot.multiplot.facet.*",
+        "import org.jetbrains.kotlinx.kandy.letsplot.translator.*",
+        "import org.jetbrains.kotlinx.kandy.letsplot.scales.*",
+        "import org.jetbrains.kotlinx.kandy.letsplot.scales.guide.*",
+        "import org.jetbrains.kotlinx.kandy.letsplot.scales.guide.model.AxisPosition",
+        "import org.jetbrains.kotlinx.kandy.letsplot.scales.guide.model.limits",
+        "import org.jetbrains.kotlinx.kandy.letsplot.style.*",
+        "import org.jetbrains.kotlinx.kandy.letsplot.tooltips.*",
+        "import org.jetbrains.kotlinx.kandy.letsplot.settings.*",
+        "import org.jetbrains.kotlinx.kandy.letsplot.settings.font.*",
+        "import org.jetbrains.kotlinx.kandy.letsplot.samples.SampleHelper",
+        "import org.jetbrains.kotlinx.kandy.ir.scale.Scale",
+        "import org.jetbrains.kotlinx.kandy.dsl.*",
+        "import org.jetbrains.kotlinx.kandy.util.color.*",
+        "import org.jetbrains.kotlinx.kandy.util.context.*",
+        "import org.jetbrains.kotlinx.dataframe.api.*",
+        "import org.jetbrains.kotlinx.dataframe.*",
+        "import org.jetbrains.kotlinx.dataframe.annotations.*",
+        "import org.jetbrains.kotlinx.dataframe.io.*",
+        "import org.jetbrains.kotlinx.dataframe.columns.*",
+        "import org.jetbrains.kotlinx.dataframe.jupyter.ImportDataSchema",
+        "import org.jetbrains.kotlinx.dataframe.jupyter.importDataSchema",
+        "import org.jetbrains.kotlinx.dataframe.jupyter.KotlinNotebookPluginUtils",
+        "import java.net.URL",
+        "import java.io.File",
+        "import kotlinx.datetime.Instant",
+        "import kotlinx.datetime.LocalDateTime",
+        "import kotlinx.datetime.LocalDate",
+        "import org.jetbrains.kotlinx.dataframe.dataTypes.*",
+        "import org.jetbrains.kotlinx.dataframe.impl.codeGen.urlCodeGenReader"
+    ]
+
+    # Write all required imports first
+    for imp in required_imports:
+        _write_line(file, imp)
+
+    # Write user imports
+    for imp in imports:
+        _write_line(file, imp)
+
+    _write_line(file, "")
+
+
+def _write_kt_file_definitions(file, defs: List[str], base_name: str) -> None:
+    """
+    Write class definition and member definitions to the Kotlin file.
+
+    Args:
+        file: File object to write to
+        defs: List of definitions
+        base_name: Base name for class name
+    """
+    sample_name = os.path.splitext(os.path.basename(file.name))[0]
+    _write_line(file, f"class {base_name.capitalize()}Tests : SampleHelper(\"{sample_name}\") {{")
+
+    for definition in defs:
+        _write_line(file, definition, indent=4)
+
+
+def _write_kt_file_tests(file, cells: List[Tuple[NotebookNode, Optional[str], Optional[str]]], base_name: str) -> None:
+    """
+    Write test methods to the Kotlin file.
+
+    Args:
+        file: File object to write to
+        cells: List of tuples containing (cell, output_type, output_content)
+        base_name: Base name for function names
+    """
+    test_index = 1
+    for cell, output_type, _ in cells:
+        if cell.cell_type == "code":
+            cell_code = cell.source
+            if cell_code.strip():
+                function_name = f"{base_name}_{test_index}"
+                save_method = _get_save_method(output_type)
+
+                _write_line(file, "", indent=4)
+                _write_line(file, "@Test", indent=4)
+                _write_line(file, f"fun {function_name}() {{", indent=4)
+                _write_line(file, "// SampleStart", indent=8)
+
+                for code_line in cell_code.split('\n'):
+                    _write_line(file, code_line, indent=8)
+
+                _write_line(file, "// SampleEnd" + save_method, indent=8)
+                _write_line(file, "}", indent=4)
+                test_index += 1
+
+
+def _get_save_method(output_type: Optional[str]) -> str:
+    """
+    Get the appropriate save method based on output type.
+
+    Args:
+        output_type: Type of output ('dataframe', 'plot', or None)
+
+    Returns:
+        Save method string
+    """
+    if output_type == 'dataframe':
+        return "\n        .saveDfHtmlSample()"
+    elif output_type == 'plot':
+        return "\n        .savePlotSVGSample()"
+    return ""
+
+
+def _write_kt_file_footer(file) -> None:
+    """
+    Write the footer of the Kotlin file.
+
+    Args:
+        file: File object to write to
+    """
+    _write_line(file, "}")
+
+
+def _write_line(file, line: str, indent: int = 0) -> None:
+    """
+    Write a line to a file with the specified indentation.
+
+    Args:
+        file: File object to write to
+        line: Line to write
+        indent: Number of spaces to indent
+    """
+    file.write(" " * indent + line + "\n")
+
+
+def process_notebook(notebook_path: str) -> None:
+    """
+    Processes a Jupyter notebook and generates corresponding Markdown and Kotlin test files while preserving order.
+
+    Args:
+        notebook_path: Path to the Jupyter notebook file
+    """
+    try:
+        base_name = os.path.splitext(os.path.basename(notebook_path))[0]
+        md_output = f"{base_name}.md"
+        kt_output = f"{base_name}.kt"
+
+        test_base_name = 'notebook_test_' + base_name
+
+        cells = extract_content(notebook_path)
+        create_md_file(md_output, cells, test_base_name)
+        create_kt_file(kt_output, cells, test_base_name)
+
+        print(f"Generated: {md_output}, {kt_output}")
+    except Exception as e:
+        print(f"Error processing notebook: {str(e)}")
+        sys.exit(1)
+
+
+if __name__ == "__main__":
+    if len(sys.argv) < 2:
+        print("Usage: python nb_to_doc.py <notebook_path>")
+        sys.exit(1)
+
+    process_notebook(sys.argv[1])
diff --git a/util/samples-utils/src/main/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/SampleHelper.kt b/util/kandy-samples-utils/src/main/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/SampleHelper.kt
similarity index 55%
rename from util/samples-utils/src/main/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/SampleHelper.kt
rename to util/kandy-samples-utils/src/main/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/SampleHelper.kt
index 364cb279e..adb95983a 100644
--- a/util/samples-utils/src/main/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/SampleHelper.kt
+++ b/util/kandy-samples-utils/src/main/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/SampleHelper.kt
@@ -1,6 +1,11 @@
 @file:Suppress("INVISIBLE_REFERENCE", "INVISIBLE_MEMBER")
+
 package org.jetbrains.kotlinx.kandy.letsplot.samples
 
+import org.jetbrains.kotlinx.dataframe.DataFrame
+import org.jetbrains.kotlinx.dataframe.api.FormattedFrame
+import org.jetbrains.kotlinx.dataframe.api.GroupBy
+import org.jetbrains.kotlinx.dataframe.io.toStandaloneHtml
 import org.jetbrains.kotlinx.kandy.ir.Plot
 import org.jetbrains.kotlinx.kandy.ir.feature.FeatureName
 import org.jetbrains.kotlinx.kandy.letsplot.feature.Layout
@@ -19,31 +24,43 @@ import org.junit.rules.TestName
 import java.io.File
 
 /**
- * Abstract class for saving plots samples.
+ * Base test class with methods configured for saving plots and dataframes samples.
+ * Allows saving samples through tests running.
+ *
+ * This class is designed to facilitate saving visual outputs such as [Plot], [PlotGrid], and [PlotBunch],
+ * as well as dataframe-like structures [DataFrame] and [GroupBy].
  *
- * This class is designed to facilitate saving visual outputs such as `Plot`, `PlotGrid`, and `PlotBunch`
- * in SVG format with support for theming adjustments, including light and dark themes.
- * Additionally, it provides default configurations for plot scaling and preview sizes.
+ * It provides methods for saving plots as SVG files and for saving dataframes as HTML files for Writerside docs.
+ * These methods provide default configurations for plot scaling and preview sizes, as well as
+ * duplicating images for dark themes.
  *
- * @constructor Initializes the sample helper with a specific sample name and an optional folder name
- * to define the output directory for saving generated visualizations.
- * The output directory is created if it doesn't already exist.
+ * Replace IDS inside the XML (SVG/HTML) with the static ones, allowing to track changes after test rerun.
  *
- * @param sampleName The name of the sample for which visualizations are being generated.
- * @param folder The folder name to store the generated visualization files. Default is "samples".
+ * @param sampleName      Identifier of the sample used to name output folders.
+ * @param subFolder       Subdirectory under the root folders where sample files are placed. Defaults to `"samples"`.
+ * @param imagesFolder    Base directory for Writerside images in the docs. Defaults to `"../docs/images"`.
+ * @param resourcesFolder Base directory for Writerside resources in the docs. Defaults to `"../docs/resources"`.
  */
-public abstract class SampleHelper(sampleName: String, folder: String = "samples") {
+public abstract class SampleHelper(
+    sampleName: String,
+    subFolder: String = "samples",
+    imagesFolder: String = "../docs/images",
+    resourcesFolder: String = "../docs/resources"
+) {
 
     @JvmField
     @Rule
     public val testName: TestName = TestName()
 
-    private val pathToImageFolder = "../docs/images/$folder/$sampleName"
+    private val pathToImageFolder = "$imagesFolder/$subFolder/$sampleName"
+
+    private val pathToResourceFolder = "$resourcesFolder/$subFolder/$sampleName"
 
     private val darkColor = Color.hex("#19191c")
 
     init {
         File(pathToImageFolder).mkdirs()
+        File(pathToResourceFolder).mkdirs()
     }
 
     private val defaultWidth = 600
@@ -61,7 +78,7 @@ public abstract class SampleHelper(sampleName: String, folder: String = "samples
      * @param savePreview Boolean flag that indicates whether to also generate and save preview versions
      * of the SVG files. When `true`, additional preview files are created with "preview_" prefixed to the file name.
      */
-    public fun Plot.saveSample(savePreview: Boolean = false) {
+    public fun Plot.savePlotSVGSample(savePreview: Boolean = false) {
         val name = testName.methodName.replace("_dataframe", "")
         saveAsSVG(name, savePreview)
         this.changeThemeToDarkMode()
@@ -80,7 +97,7 @@ public abstract class SampleHelper(sampleName: String, folder: String = "samples
      * @param scaling Boolean flag that determines whether the SVG output should scale to an appropriate size.
      * If `true`, the method scales the output appropriately; otherwise, it does not.
      */
-    public fun PlotGrid.saveSample(savePreview: Boolean = false, scaling: Boolean = true) {
+    public fun PlotGrid.savePlotSVGSample(savePreview: Boolean = false, scaling: Boolean = true) {
         val name = testName.methodName.replace("_dataframe", "")
         saveAsSVG(name, savePreview, scaling)
         plots.forEach {
@@ -102,7 +119,7 @@ public abstract class SampleHelper(sampleName: String, folder: String = "samples
      * @param scaling Boolean flag that determines whether the SVG output should scale to an appropriate size.
      * If `true`, the method scales the output appropriately; otherwise, it does not.
      */
-    public fun PlotBunch.saveSample() {
+    public fun PlotBunch.savePlotSVGSample() {
         val name = testName.methodName.replace("_dataframe", "")
         saveAsSVG(name)
         this.items.forEach {
@@ -111,6 +128,39 @@ public abstract class SampleHelper(sampleName: String, folder: String = "samples
         saveAsSVG("${name}_dark")
     }
 
+    /**
+     * Saves this [FormattedFrame] as HTML.
+     */
+    public fun FormattedFrame<*>.saveDfHtmlSample() {
+        val name = testName.methodName.replace("_dataframe", "")
+        val dfHtml = df.toStandaloneHtml(
+            configuration = getDisplayConfiguration(SamplesDisplayConfiguration),
+            getFooter = WritersideFooter
+        ) + WritersideStyle
+        // TODO fix static ids
+        val htmlWithStaticIDs = replaceIdsWithStaticDataFrame(dfHtml.toString()) // replaceIdsWithStatic(dfHtml.toString())
+        File(pathToResourceFolder, "$name.html").writeText(htmlWithStaticIDs)
+    }
+
+    /**
+     * Saves this [DataFrame] as HTML.
+     */
+    public fun DataFrame<*>.saveDfHtmlSample() {
+        val name = testName.methodName.replace("_dataframe", "")
+        val dfHtml = this.toStandaloneHtml(
+            configuration = SamplesDisplayConfiguration,
+            getFooter = WritersideFooter
+        ) + WritersideStyle
+        // TODO fix static ids
+        val htmlWithStaticIDs = replaceIdsWithStaticDataFrame(dfHtml.toString()) // replaceIdsWithStatic(dfHtml.toString())
+        File(pathToResourceFolder, "$name.html").writeText(htmlWithStaticIDs)
+    }
+
+    /**
+     * Saves this [GroupBy] as HTML.
+     */
+    public fun GroupBy<*, *>.saveDfHtmlSample(): Unit = toDataFrame().saveDfHtmlSample()
+
     private fun Plot.changeThemeToDarkMode() {
         val layout = (this.features as MutableMap)[FeatureName("layout")] as? Layout
         val darkBackground = BackgroundParameters(fillColor = darkColor)
@@ -173,7 +223,7 @@ public abstract class SampleHelper(sampleName: String, folder: String = "samples
     }
 
     private fun Figure.toSVG(): String {
-        return replaceIdsWithConstant(PlotSvgExport.buildSvgImageFromRawSpecs(this.toSpec()))
+        return replaceIdsWithStatic(PlotSvgExport.buildSvgImageFromRawSpecs(this.toSpec()))
     }
 
     private fun Plot.saveAsSVG(name: String, savePreview: Boolean = false) {
@@ -197,13 +247,75 @@ public abstract class SampleHelper(sampleName: String, folder: String = "samples
         File(pathToImageFolder, "$name.svg").writeText(wrap().toSVG())
     }
 
-    private fun replaceIdsWithConstant(svgString: String): String {
+    private val idPrefix = "_sample_helper_static_id_prefix_"
+
+    private fun replaceIdsWithStatic(xmlString: String): String {
         val regex = Regex("""(id\s*=\s*["'])([^"']*)["']""")
         var count = 0
-        var result = svgString
-        regex.findAll(svgString).forEach {
-            result = result.replace(it.groupValues[2], "xXxprefixXx${count++}")
+        var result = xmlString
+        regex.findAll(xmlString).forEach {
+            result = result.replace(it.groupValues[2], "$idPrefix${count++}")
         }
         return result
     }
+
+    internal companion object {
+        private const val DF_PREFIX = "df_"
+    }
+
+    internal fun replaceIdsWithStaticDataFrame(html: String): String {
+        // normalize all minus signs to ASCII '-'
+        fun normNum(s: String) = s.replace(Regex("[\u2212\\p{Pd}]"), "-")
+
+        val dash = "[-\u2212\\p{Pd}]?"                 // any minus sign (or absence)
+        val esc  = Regex.escape(DF_PREFIX)
+
+        // The number is always in the LAST group
+        val domIdRe   = Regex("""\bid\s*=\s*(['"])$esc($dash\d+)\1""")
+        val jsFieldRe = Regex("""\b(id|rootId|frameId)\s*:\s*($dash\d+)\b""")
+
+        // keep what is to the left of the number and the closing parenthesis
+        val renderRe  = Regex("""\b((?:DataFrame\.)?renderTable\()\s*($dash\d+)\s*(\))""")
+
+        val urlRe     = Regex("""\burl\(#$esc($dash\d+)\)""")
+        val hrefRe    = Regex("""\bhref\s*=\s*(['"])#$esc($dash\d+)\1""")
+
+        // 1) collect all ids in order of appearance
+        val seen = linkedSetOf<String>()
+        listOf(domIdRe, jsFieldRe, renderRe, urlRe, hrefRe).forEach { re ->
+            re.findAll(html).forEach { seen += normNum(it.groupValues.last()) }
+        }
+        if (seen.isEmpty()) return html
+
+        // 2) map to stable non-negative numbers: 0,1,2...
+        val map = linkedMapOf<String, String>()
+        var next = 0
+        if ("0" in seen) { map["0"] = "0"; next = 1 }
+        for (old in seen) if (old !in map) map[old] = (next++).toString()
+
+        fun remap(old: String) = map[normNum(old)] ?: old
+
+        // 3) replacements
+        var out = domIdRe.replace(html) { m ->
+            val q   = m.groupValues[1]
+            val num = remap(m.groupValues.last())
+            """id=$q$DF_PREFIX$num$q"""
+        }
+        out = jsFieldRe.replace(out) { m ->
+            val key = m.groupValues[1]
+            val num = remap(m.groupValues.last())
+            "$key: $num"
+        }
+        out = renderRe.replace(out) { m ->
+            val front = m.groupValues[1]
+            val num   = remap(m.groupValues[2])
+            val back  = m.groupValues[3]
+            front + num + back
+        }
+        out = urlRe.replace(out)  { m -> "url(#$DF_PREFIX${remap(m.groupValues.last())})" }
+        out = hrefRe.replace(out) { m -> """href=${m.groupValues[1]}#$DF_PREFIX${remap(m.groupValues.last())}${m.groupValues[1]}""" }
+
+        return out
+    }
+
 }
\ No newline at end of file
diff --git a/util/kandy-samples-utils/src/main/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/writersideParameters.kt b/util/kandy-samples-utils/src/main/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/writersideParameters.kt
new file mode 100644
index 000000000..e9ecc8b42
--- /dev/null
+++ b/util/kandy-samples-utils/src/main/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/writersideParameters.kt
@@ -0,0 +1,82 @@
+package org.jetbrains.kotlinx.kandy.letsplot.samples
+
+import org.jetbrains.kotlinx.dataframe.DataFrame
+import org.jetbrains.kotlinx.dataframe.io.DataFrameHtmlData
+import org.jetbrains.kotlinx.dataframe.io.DisplayConfiguration
+
+internal val SamplesDisplayConfiguration = DisplayConfiguration(enableFallbackStaticTables = false)
+
+internal val WritersideStyle = DataFrameHtmlData(
+    // copy writerside stlyles
+    style =
+        """
+        body {
+            font-family: "JetBrains Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
+        }       
+        
+        :root {
+            color: #19191C;
+            background-color: #fff;
+        }
+        
+        :root[theme="dark"] {
+            background-color: #19191C;
+            color: #FFFFFFCC
+        }
+        
+        details details {
+            margin-left: 20px; 
+        }
+        
+        summary {
+            padding: 6px;
+        }
+        """.trimIndent(),
+    script = """
+        function sendHeight() {
+            const table = document.querySelector('table.dataframe');
+            if (!table) return;
+        
+            let height = 0;
+            
+            const thead = table.querySelector('thead');
+            if (thead) height += thead.offsetHeight;
+            
+            const rows = table.querySelectorAll(':scope > tbody > tr');
+            rows.forEach(row => {
+                height += row.offsetHeight;
+            });
+            
+            height += getVerticalMargins(table) + 10;
+        
+            window.parent.postMessage({ type: 'iframeHeight', height: Math.ceil(height) }, '*');
+        }
+        
+        function getVerticalMargins(element) {
+            const style = getComputedStyle(element);
+            return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
+        }
+        
+        function repeatHeightCalculation(maxRetries = 10, interval = 100) {
+            let retries = 0;
+            const intervalId = setInterval(() => {
+                sendHeight();
+                retries++;
+                if (retries >= maxRetries) clearInterval(intervalId);
+            }, interval);
+        }
+        
+        window.addEventListener('load', repeatHeightCalculation);
+        
+        const observer = new MutationObserver(() => repeatHeightCalculation(5, 50));
+        observer.observe(document.querySelector('.dataframe'), {
+            childList: true,
+            subtree: true,
+            characterData: true,
+        });
+
+
+    """.trimIndent()
+)
+
+internal val WritersideFooter: (DataFrame<*>) -> String = { "" }
diff --git a/util/kandy-samples-utils/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/SampleHelperTest.kt b/util/kandy-samples-utils/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/SampleHelperTest.kt
new file mode 100644
index 000000000..d9462c26c
--- /dev/null
+++ b/util/kandy-samples-utils/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/SampleHelperTest.kt
@@ -0,0 +1,95 @@
+package org.jetbrains.kotlinx.kandy.letsplot.samples
+
+import org.junit.Test
+import kotlin.test.assertTrue
+import kotlin.test.assertFalse
+
+class SampleHelperTest: SampleHelper("name") {
+
+    @Test
+    fun `ids become static for Modify samples`() {
+        val html = """
+            <table class="dataframe" id="df_-1811939324"></table>
+            <script>
+            call_DataFrame(function() { 
+                DataFrame.addTable({ id: -1811939324, rootId: -1811939324, totalRows: 7 });
+            });
+            call_DataFrame(function() { DataFrame.renderTable(-1811939324) });
+            </script>
+        """.trimIndent()
+
+        val out = replaceIdsWithStaticDataFrame(html)
+
+        // the root is consistently 0
+        assertTrue(out.contains("""id="df_0""""))
+        assertTrue(out.contains("id: 0"))
+        assertTrue(out.contains("rootId: 0"))
+        assertTrue(out.contains("renderTable(0)"))
+
+        // no old dynamic ids remain (including Unicode minus)
+        assertFalse(Regex("""df_[-\u2212\p{Pd}]\d+""").containsMatchIn(out))
+    }
+
+    @Test
+    fun `js fields do not contain negative or unicode-minus ids`() {
+        val out = replaceIdsWithStaticDataFrame(sampleHtml)
+
+        // 1) no negative values remain in JS fields
+        assertFalse(Regex("""\b(?:id|rootId|frameId)\s*:\s*[-\u2212\p{Pd}]\d+""")
+            .containsMatchIn(out))
+
+        // 2) only non-negative "static" numbers are allowed
+        Regex("""\b(?:id|rootId|frameId)\s*:\s*(\d+)\b""")
+            .findAll(out)
+            .forEach { m ->
+                val v = m.groupValues[1].toInt()
+                assertTrue(v >= 0)  // optionally, can be narrowed to range 0..N
+            }
+    }
+
+    @Test
+    fun `dom ids are static and non-negative`() {
+        val out = replaceIdsWithStaticDataFrame(sampleHtml)
+
+        // no df_ with a minus sign
+        assertFalse(Regex("""id\s*=\s*['"]df_[-\u2212\p{Pd}]""").containsMatchIn(out))
+
+        // there is at least one stabilized id
+        assertTrue(out.contains("""id="df_0""""))
+    }
+
+    @Test
+    fun `renderTable keeps DataFrame prefix and ids are non-negative`() {
+        val out = replaceIdsWithStaticDataFrame(sampleHtml)
+
+        assertTrue(Regex("""\bDataFrame\.renderTable\(\s*\d+\s*\)""").containsMatchIn(out))
+        assertFalse(Regex("""\bDataFrame\.renderTable\(\s*[-\u2212\p{Pd}]""").containsMatchIn(out))
+    }
+
+    private val sampleHtml = """
+        <table class="dataframe" id="df_-1811939324"></table>
+        <script>
+          call_DataFrame(function() {
+            DataFrame.addTable({ id: -1811939324, rootId: -1811939324, frameId: -42, totalRows: 10 });
+          });
+          call_DataFrame(function() { DataFrame.renderTable(-1811939324) });
+        </script>
+    """.trimIndent()
+
+    @Test
+    fun `unicode minus also handled`() {
+        val html = """
+            <table id="df_−2046820349"></table>
+            <script>
+              DataFrame.addTable({ id: −2046820349, rootId: −2046820349 });
+              DataFrame.renderTable(−2046820349)
+            </script>
+        """.trimIndent()
+
+        val out = replaceIdsWithStaticDataFrame(html)
+        assertTrue(out.contains("""id="df_0""""))
+        assertTrue(out.contains("id: 0"))
+        assertTrue(out.contains("rootId: 0"))
+        assertTrue(out.contains("renderTable(0)"))
+    }
+}
diff --git a/util/kandy-samples-utils/update_ws_resources.py b/util/kandy-samples-utils/update_ws_resources.py
new file mode 100644
index 000000000..8d73337d0
--- /dev/null
+++ b/util/kandy-samples-utils/update_ws_resources.py
@@ -0,0 +1,71 @@
+#!/usr/bin/env python3
+import argparse
+import os
+from pathlib import Path
+
+def find_all_files(resources_dir):
+    """
+    Recursively find all files in the given directory.
+
+    Args:
+        resources_dir (str): Path to the resources directory
+
+    Returns:
+        list: List of file paths
+    """
+    resources_path = Path(resources_dir)
+    all_files = []
+
+    for root, _, files in os.walk(resources_path):
+        for file in files:
+            all_files.append(os.path.join(root, file))
+
+    return all_files
+
+def update_md_file(md_file_path, resource_files, resources_dir):
+    """
+    Completely overwrite the markdown file with resource tags for each file.
+
+    Args:
+        md_file_path (str): Path to the markdown file
+        resource_files (list): List of resource file paths
+        resources_dir (str): Base directory for resources
+    """
+    resources_path = Path(resources_dir)
+
+    # Prepare the resource tags
+    resource_tags = []
+    for file_path in resource_files:
+        # Get just the filename without the path
+        file_path = Path(file_path)
+        filename = file_path.name
+
+        # Create the resource tag
+        resource_tag = f'<resource src="{filename}"></resource>'
+        resource_tags.append(resource_tag)
+
+    # Create content with only the resource tags
+    content = '\n'.join(resource_tags)
+
+    # Write the content to the MD file (completely overwriting it)
+    with open(md_file_path, 'w', encoding='utf-8') as f:
+        f.write(content)
+
+def main():
+    # Parse command-line arguments
+    parser = argparse.ArgumentParser(description='Update markdown file with resource tags for files in a directory.')
+    parser.add_argument('resources_dir', help='Path to the directory containing resource files')
+    parser.add_argument('md_file', help='Path to the markdown file to update')
+
+    args = parser.parse_args()
+
+    # Find all files in the resources directory
+    resource_files = find_all_files(args.resources_dir)
+
+    # Update the markdown file with resource tags
+    update_md_file(args.md_file, resource_files, args.resources_dir)
+
+    print(f"Updated {args.md_file} with {len(resource_files)} resource tags.")
+
+if __name__ == "__main__":
+    main()
diff --git a/util/kandy-samples-utils/ws_web_archive.png b/util/kandy-samples-utils/ws_web_archive.png
new file mode 100644
index 000000000..c06c2ccdd
Binary files /dev/null and b/util/kandy-samples-utils/ws_web_archive.png differ